If I wanted to also have a banner stretching across the top of the page, I need only place it in the HTML before the two floating divs. Remember: the default width of a block-level element will stretch across the entire page; thus a header placed at the top of the page will naturally stretch all the way across.

You've already seen the float property used to float images so that the text wraps around them, but float can also be used to float text as well. If an element is floated, it will move to the left or right edge of its parent element (its "containing block") until it encounters the margin, padding, or border of another block-level element (floated elements automatically become block-level elements). Float has two possible values (along with the default none): left and right.

As you'll see in Chapter 11, it's very difficult to stretch a bottom box across an absolutely positioned layout, but it's relatively easy to do so with a floated layout like the one above. We could use either of the two-column layouts we've just covered, but let's take the one in which both columns are floated and add a footer box.

The footer uses the clear property which we described in Chapter 6 :Working With Graphics. The clear keeps the floats from influencing any of the content that comes after them; thus the footer div will stretch all the way across the page.