Columns, Centered, Liquid, Banner, Footer

Clear the document flow

We have more to do if that footer is going to show up consistently. I have some floated elements in this document (col-left and col-right are floated), before the footer element. When an element is floated, it is taken out of the normal flow of the document. Elements that follow a floated element behave as if the floated element isn't even there.

Right now, our footer thinks it's stacked right bellow the header. We need the footer to clear some vertical space for our floated elements. Using CSS, we'll add a declaration to the footer that clears everything to the left. That way we can return to a normal document flow:

Much better! Footer has now cleared space for our two floated elements. Your web page should function like this now.