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

• Because the base styles sheet only sets top margins, we can create
gaps at the bottom of the main boxes via padding.
Note: The rule for html is shown here, but it makes more sense to remove
that rule from the base styles sheet rather than overwriting the declaration
here.
This is the last step for this first layout. It relies on these simple rules:
html {
height: auto;
background: #45473f;
}
body {
width: 80%;
margin: 20px auto;
background: #ffe3a6;
border: 1px solid #efefef;
}
#sidebar {
float: left;
position: relative;
width: 200px;
margin-right: -200px;
background: #d4c37b; /* color must match #main's left border
*/
}
#main {
float: left;
border-left: 200px solid #d4c37b; /* color must match
#sidebar's background */
}
#header,
#footer {
clear: left;
overflow: hidden;