メインコンテンツエリアの左側にサイドバーを配置するにはどうすればよいですか？

Question

こんにちはすべて、基本的には、私は非常にシンプルなレイアウト、ヘッダーイメージ、主に中心のテキストエリアを持っています。メインの中央のテキスト領域の左側にあるサイドバー。 これは私のレイアウトがどのように見えるか、基本的である：

はまあ

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

サイドバーが明らかにページの左側にすべての道を揃えるために起こっている、私はそれが何をしたいものですまだの左側にあること私はそれがメインの中心の領域を "抱きしめる"ようにしたい。ここで

は、それが今どのように見えるかの基本的な絵で、私は起こるしたいものの矢印： http://img18.imageshack.us/img18/2307/exampleps.jpg

Answer 1

をデモ：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：

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

Answer 2

ではなく、すべてのdivでそれを試してみてください。

ライブ

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

Answer 3

ここでは、ソリューションです：http://jsfiddle.net/MwEun/1/

は、あなたのニーズに要素の幅に合わせて持っていますが、動作するはずです。この例は、本当に簡単なhtmlレイアウトの本当の基本バージョンです。

良いと要素をセンタリングするための固溶体を揺動幅を設定（例えば500pxなど）した後、中心要素を使用margin: 0 auto;