Cross-Browser Layout Techniques - Beginning CSS3 - page 262

Figure 12-4. The design falls apart if the sidebar is longer than the main content
The solution is simple: prevent the footer from moving up by adding the clear property to the #footer style
as in left2col_clear.html:
#footer {
background-color: #252017;
color: #DB9924;
padding: 10px;
clear: both;
}
Filling the Sidebar Background
When the sidebar is longer than the main content, the problem of the background color not stretching the full
height of the column goes away. This suggests a possible solution: add the background color to the taller element,
and let the parent's background color show through the shorter one.
In left2col_reverse.html, instead of the sidebar having a background color, it inherits the biscuit background
from the wrapper<div> , and the main<div> is given a white background like this:
#wrapper {
width: 100%;
min-width: 550px;
max-width: 1000px;
margin: 0 auto;
background-color: #D3C89B ;
border-left: #252017 solid 1px;
border-right: #252017 solid 1px;
}