IE's box model is a little fudged when using floats.
My new approach is to use a wrapper div, set it at position:relative; then position other sections of the site accordingly. I could do a small writeup if you like. We could use the newer content.
In the mean time...
HTML Code:
<style type="text/css">
body {
text-align:center;
}
#wrap {
width:960px;
margin:5px auto; /* the auto makes it center itself */
text-align:left; /* align the text left */
}
#header {
height:150px;
margin:0px;
padding:0px;
}
#content {
padding-left:250px;
position:relative; /* makes absolute positioned child elements relative to this. */
background:transparent url(/img/body_bg.gif) repeat-y top left;
}
#side {
width:240px;
position:absolute;
top:10px;
left:0px;
}
</style> <div id="wrap"> <div id="header"> <h1>Title of the page</h1> </div> <div id="content"> <p>Your content section</p> <div id="side">
sidebar
</div> </div> <div id="footer">
copyright and footer links
</div> </div>