Placing DIVs using CSS

Question

Say I have the following DIVs:

<div id="top">Page header</div>
<div id="main">Main content</div>
<div id="sidebar">Sidebar content</div>
<div id="bottom">Page footer</div>

How can I use CSS to place the sidebar DIV to the right of the main DIV, and set it to, say, 20% of the total width?

I'd also like to have some margins between the four DIVs, so that the layout doesn't look too cramped.

Would like it to work in "all" browsers, including that bastard IE6...

Answer 1

put main and sidebar in the wrapper, you can set the size/location of wrapper and preserve your layout.

#top {
  /* top stuff */
}
#wrapper {
  width: 800px;
  margin: 0px auto; /* centers on page */
}
#main {
  float: left;
  width: 80%;
  margin-right: 10px;
}
#sidebar {
  float: left; /* by floating left here you have a greater control over the margin */
  width: 20%;
}
#bottom {
  /* bottom stuff */
}

Answer 2

use floats, negative margins and padding.

you can find good tutorials on http://alistapart.com about page layouting (i really recommend the holy grail) and it also deals a lot with cross-browser problems

http://www.alistapart.com/articles/holygrail

Answer 3

Try:

html, body, div { margin: 0; padding: 0; border: 0 none; } /* primitive reset CSS */
#main { float: left; width: 80%; }
#sidebar { float: right; width: 20%; }
#bottom { clear: both; }

It's important for this kind of thing to use a reset CSS (there are others) as different browses have different default values for things like borders, margins and padding.

Answer 4

<div id="top">Page header</div>
<div id="main">
    <div id="content">Main content</div>
    <div id="sidebar">Sidebar content</div>
</div>
<div id="bottom">Page footer</div>


#top, #main, #bottom { float: left; clear: both; width: 100%; margin-bottom: 1em; }
#sidebar { float: right; width: 20%; }
#content { float: right; }

Answer 5

It's very very important that you set the doc type to strict, ala thusly:

If you do this, you wont need to clear your CSS (with a few exception) and can simply use the correct box models.

Answer 6

I will answer my own question with a link to this article which was exactly what I was looking for:

http://www.456bereastreet.com/lab/developing%5Fwith%5Fweb%5Fstandards/csslayout/2-col/