如何将侧边栏对齐到主要内容区域的左侧？

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; }