How do I align a sidebar to the left of the main content area?

Hey all, so basically I have a very simple layout with a header image, a main centered text area. And a sidebar that is to the left of the main centered text area. This is basically how my layout looks:

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

Well the sidebar is obviously going to align all the way to the left side of the page, what I would like it to do is still be on the left side of the page, but I 开发者_运维技巧want it to "hug" the main centered area.

Here is a basic picture of what it looks like now, and an arrow of what I would like to happen: http://img18.imageshack.us/img18/2307/exampleps.jpg

Live demo: 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; }

Try it with all divs instead:

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

Here is a solution: http://jsfiddle.net/MwEun/1/

You have to fit the width of the elements to your needs but should work. This example is a really basic version of an really easy html layout.

A good and rock solid solution for centering elements is to set a width (e.g. 500px) and then adding margin: 0 auto;