Faux Columns Functionality
Faux columns is a well-known technique for making a page look like it has equal height columns. This is accomplished by surrounding the columns you want to be "equal height" with another div, in this case #midpage, and apply a vertically repeating background to it. As you can see on this page's left side, the navBackground image is only 200 pixels wide (width of the #navigation column) and is repeated in the y direction (up and down). To provide a different background for the #content area, the color #fff (white) is applied behind the image. Since the background is being applied to #midpage, not #navigation, its effects are felt throughout the width of the page. The clearBoth class is necessary for correct operation of faux columns in some browsers.
Faux columns is better explained at A List Apart's article Faux Columns, which is where I learned the technique.
Relevant HTML
<div id="midpage"> <!-- #content div. --> <!-- #navigation div. --> <div class="clearBoth"></div> </div>
Relevant CSS
#midpage
{
background:url(../images/navBackground.jpg) repeat-y #fff;
}