사이드 바를 주 컨텐츠 영역의 왼쪽에 정렬하는 방법은 무엇입니까?

안녕하세요. 기본적으로 헤더 이미지, 메인 중심의 텍스트 영역을 가진 매우 간단한 레이아웃을 가지고 있습니다. 그리고 메인 중심의 텍스트 영역의 왼쪽에있는 사이드 바. 이 내 레이아웃 모양을 기본적으로 :사이드 바를 주 컨텐츠 영역의 왼쪽에 정렬하는 방법은 무엇입니까?

음

<center>Header</center> 
<div style="float:left;">Sidebar</div> 
<center>Main Area</center>

사이드 바는 분명 페이지의 왼쪽에 모든 방법을 정렬하는 것입니다, 내가 할 싶은 것이 여전히 왼쪽에있을 이 페이지는 메인 중심 영역을 "포옹"하고 싶습니다. http://img18.imageshack.us/img18/2307/exampleps.jpg

출처

2011-02-06 MJ93

않도록 첨가이를 중단된다. 또한 http://jsfiddle.net/이 코드를 공유하는 데 유용 할 수도 있습니다. –

라이브 여기

은 지금의 모습의 기본 그림, 내가 일어날 싶은 것이의 화살표입니다 데모 : http://jsfiddle.net/rRm7k/

HTML :

<div id="wrap"> 
    <div id="header"> HEADER </div> 
    <div id="body"> 
     <div id="sidebar"> SIDEBAR </div> 
     <div id="main"> MAIN CONTENT </div>   
    </div> 
</div>

CSS : http://jsfiddle.net/MwEun/1/

당신은 여러분의 필요에 요소의 너비에 맞게 있지만 작동합니다 : 여기

#wrap { width:500px; margin:0 auto; } 
#body { overflow:auto; } 
#sidebar { float:left; width:150px; min-height:400px; }

출처

2011-02-06 22:02:09

멋지지만 헤더 본문과 같은 ID가 혼란 스럽습니다. – caub

@crl 오늘이 기능을 구현하려면 다음과 같이 변경해야합니다. 1. 의미 '

', '

대신 모든 div의 그것을 시도 :

<div>Header</div> 
<div style="float:left;width:250px">Sidebar</div> 
<div style="float:right;">Main Area</div>

출처

2011-02-06 21:51:34

하지만 메인 영역과 헤더가 중앙에 위치해야합니다. div의 메인 영역과 헤더가 있습니다 – MJ93

사이드 바의 좌우를 중심으로 센터링을 시도해보십시오. 하나는 비어있을 수 있습니다. 또는 주 영역의 오른쪽에 적절한 크기 여백을 추가하십시오. – BillThor

는 솔루션입니다. 이 예제는 정말 쉬운 html 레이아웃의 정말 기본적인 버전입니다.

가

요소를 센터링 좋고 견고한 용액 폭을 설정하는 것이다 (예를 들어 500 픽셀), 그리고, 중심 요소를 사용 margin: 0 auto;

출처

2011-02-06 22:02:20 gearsdigital

사이드 바를 주 컨텐츠 영역의 왼쪽에 정렬하는 방법은 무엇입니까?

답변

관련 문제