clearing floats

By default, a containing element with floated children will not extend to the bottom of the floats because the floats are removed from the flow of the page. To fix this, I typically put an element at the bottom of the containing element, after all floats, with the style “clear: both;”.

There are some other ways to achieve this, and the above method may not work in all browsers. See the links below.

• http://www.positioniseverything.net/easyclearing.html
• http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
• http://drupal.org/node/380906