content
Giving a fixed width to the body element is all we need to stop the layout from "flowing".
I'm taking advantage of this fixed layout to plug a background image on body, as well as a border. This is the image I'm using to simulate both columns.
Using auto margin and "text-align" should make sure this layout is centered in all browsers.
CSS:
body {
width:640px;
margin:0 auto;
text-align:center;
background:url(img/background.gif);
border:1px solid #666
}
#header,#menu,#content,#sub-section,#footer {
overflow:hidden;
display:inline-block;
text-align:left
}
/* safari and opera need this */
#header,#menu,#footer {width:100%}
#content,#sub-section {float:left}
#content {width:79.9%}
#sub-section {width:20%}
#footer {clear:left}
HTML
<div id="header"><h1>header</h1></div>
<div id="menu"><h1>menu</h1></div>
<div id="content"><h1>content</h1></div>
<div id="sub-section"><h1>sub-section</h1></div>
<div id="footer"><h1>footer</h1></div>
