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

What do these rules do?
vertical-align: bottom makes #wrapper sit at the bottom of the line
box rather than the baseline.
the two borders (for #sidebar and #main ) overlap because of the negative
right margin set on #sidebar . This overlap guarantees that this “common”
border will be as tall as the tallest column.
If you look at step two, things look much better. The last things to do is to
add the base styles sheet and the same rules we used at the end of the first
demo:
<link rel="stylesheet" type="text/css" href="http://
tjkdesign.com/ez-css/css/base.css">
and then add these rules:
html {
height: auto;
}
body {
border: 1px solid #efefef;
}
#header,
#main,
#sidebar,
#footer {
padding-bottom: 2em;
}