HTML and CSS Reference
In-Depth Information
float:right;
background:#fff url(nav-to-content-trans.gif) repeat-y left;
}
#content-inner {
padding:5px 15px 0 15px;
}
#navigation {
width:200px;
float:left;
padding-top:15px;
}
Figure 7-6 shows the effect.
Figure 7-6.
The background image in the body shows through as the outer container has
collapsed down.
What's happened this time? Notice that the left column is missing the background color;
the fade image set on the
body
element is showing through. Don't worry, though, it's easily
fixed. Besides, we think it's only fair to take you through the pain that other CSS layout new-
bies have to endure so that you know how to put things right!
The problem here is similar to what happened with the absolutely positioned scheme:
when the items were floated, the outer container effectively collapsed in behind those floated
items. The simplest way to solve this problem is to insert a
div
element after the two floated
items and add some CSS to clear any floated elements, which restores the normal document
flow. We'll give this
div
an
id
of
footer
(even though there's currently no footer text or informa-
tion in there; think: future-proofing!). This has the effect of dragging the outer container back
out to where the floated items finish. (Clearing float collapse problems can get a little trouble-
some but don't worry—this thorny topic is covered later in this chapter in the section
“Managing Floats.”)
