HTML and CSS Reference
In-Depth Information
#main {
margin-left: 36%;
margin-left: -moz-calc(33% + 20px);
margin-left: calc(33% + 20px);
padding: 10px 20px;
background-color: #FFF;
}
This results in both columns having backgrounds that stretch the full height between the header and footer,
as shown in Figure
12-5
.
Figure 12-5.
The shorter column gets its background from the parent element
While this undoubtedly works, you rarely have the luxury of knowing which column is going to be longer.
On a large site or one that's dynamically populated with content from a database, there's no way to guarantee the
relative proportions of the columns.
You need a more robust solution.
Using a Background Image to Simulate Equal Columns
To get around the problem of the background of one column being shorter than the other, the most reliable cross-
browser solution is a technique known as faux columns (
faux
is French for “false”). A vertically tiled background
image on a parent element creates the illusion of equal length columns.
When working with a fixed-width layout, you create an image the same width as the sidebar, and use it as the
background-image on the left or right of the parent element. For a liquid layout, you need to create a background
image for both columns and position it horizontally using a percentage value as described in “Controlling the
Position of Background Images” in Chapter 8. The image needs to be at least as wide as the maximum width of
the layout, and the proportions of the background colors need to be the same as for the columns.
