by Martin White
When designers and developers first start using CSS for page design and positioning the use of floated divs can seem very appealing as a quick and easy way to (for instance) position the two main content area divs of a site design.
For instance you may want a left hand div to contain a main navigation menu and a larger right hand div to contain the basic content or copy of the site’s pages.
OK so have a page design 980px wide.
Within a ‘containing’ div, you set the left ‘#menu’ div to float:left and the right ‘#content’ div to float:right, give them both a compatible width so that they can exist side by side with enough room.
Looking pretty good!
Now lets add a footer div below these two (still within the ‘containing’ div), for copyright info etc.
OK seems fine. Lets ad some copy to the #content div.
You add some content to the div which in turn expands the height of it and Oh Oh! The div ‘breaks out’ and content spills over your new #footer div destroying your layout.
The answer? The property ‘clear’.
We can use the clear property to prohibit floated elements of a div appearing to the right, left or both sides of another div.
In this case we should set or footer div to use clear:both.
This means #footer will not allow the #menu or #content divs to appear to it’s left or right (both) and in practice this stops the content of either breaking out over our footer.
A full explanation of the clear property can be found on the W3C schools site here: