How to align the sidebar to the left of the main content area?

Question

Hello everyone, so basically I have a very simple layout with a header image, the main central area of ​​the text. And a sidebar located to the left of the main central area of ​​the text. This is basically what my layout looks like:

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

It’s good that the sidebar will obviously be aligned completely to the left of the page, what I would like to do is still on the left side of the page, but I want it to “hug” the main centered area.

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

Answer 1

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

Answer 2

Try with all divs instead:

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

Answer 3

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

You must match the width of the elements to suit your needs, but should work. This example is a really basic version of a very lightweight html layout.

A good and solid solution for centering elements is to set the width (for example, 500 pixels), and then add margin: 0 auto;