Equal Height Column Layouts With Borders And Negative Margins In CSS - CSS Essentials - page 190

THE MARKUP
<div id="wrapper">
<div id="header"><h2><a href="#">Header</a></h2><p>Lorem
ipsum...</p></div>
<div id="sidebar"><h2><a href="#">Sidebar</a></h2><p>Lorem
ipsum...</p></div>
<div id="aside"><h2><a href="#">Aside</a></h2><p>Lorem
ipsum...</p></div>
<div id="main"><h2><a href="#">Main</a></h2><p>Lorem
ipsum...</p></div>
<div id="footer"><h2><a href="#">Footer </a></h2><p>Lorem
ipsum...</p></div>
</div>
CSS
We start with the generic rules from the previous demos:
html {
background: #45473f;
}
body {
width: 80%;
margin: 20px auto;
background: #ffe3a6;
}
#header,
#footer {
overflow: hidden;
zoom: 1;
background: #9c9965;
}
#sidebar {
float: left;
width: 200px;