HTML and CSS Reference
In-Depth Information
Faux Columns
In the previous float example, you'll notice that the height of the left
element is shorter than the right. If you were to place a background color
or image on this element, it wouldn't extend past this element to cover
the entire left gutter or column. A background image on the containing
element will continue through the whole space, so use that opportunity
to apply a background image to provide the appearance of full-height
columns. The left column in
Figure 7.3
is an example of this faux column
technique.
Figure 7.3
Background
image on the
container ele-
ment providing
the appearance
of a column that
extends past the
content.
.container {
padding: 5px;
border: 1px solid black;
background: url(images/bg_faux_columns.png) repeat-y left
➥
top;
}
.main {
height: 200px;
margin-left: 110px;
border: 1px solid black;
}
.floated {
float: left;
height: 150px;
