HTML and CSS Reference
In-Depth Information
Faux Columns: Using Background Images
to Suggest Columns
When we discussed the three-column layout earlier, we fibbed a bit by calling them columns.
Why? Because if you look at the layout, there's a “perceived” column—that is, whitespace in
the navigation and related links areas
suggests
a column but it's just a block of content floating
against a white background. The moment we try to put a background color on that column or
apply a border to it, everything goes wrong, as the unsightly foreground and background com-
bination in Figure 7-20 shows:
#related {
position:absolute;
top:6.8em;
right:10px;
background:yellow;
border-left:2px solid black;
}
Figure 7-20.
The right column is not really a column at all.
If you are using floats or absolutely positioned elements in a layout like this, the content
will not stretch to fill the available height of the containing element—unless you employ
JavaScript to do some clever calculations and resizing. This means you cannot apply back-
ground color that fills the entire height—or can you?
Faux Columns to the Rescue
Faux
(or fake) columns are the solution. (We snuck in an example of using faux columns ear-
lier when we discussed a fixed-width layout with a fixed height applied to the outer container.)
Essentially, this approach involves using a background image, which is tiled along the y-axis.
However, this image is applied not to the element that's being floated or positioned but to an
element that sits
behind
that (one or more steps up the document tree). By doing this, you
