Chapter 7: Page Layouts
115
Wrapping Floated Columns with overflow:auto, overflow:hidden, or .clearfix You’ve seen that when tall floated elements get pulled out of the document flow, their containing element collapses to the height of the remaining content (if there is any). This is often undesirable when that container is intended to be a self-contained content item. There are two ways to prevent this collapsing behavior. You can either hold the container open by clearing the float with a nonfloating content element at the end of the block or force it to grow to include all its contents. You can accomplish the first by adding additional markup such as <br style=”clear:both”> right before the end of the container. Littering documents with presentation markup should be avoided, and so generated content is often used to emulate this clearing behavior. Full explanations of this technique, often applied by styling a utility class called clearfix, is described at Position is Everything (http://www.positioniseverything.net/easyclearing.html). A side effect of setting the overflow property on an element to auto or hidden is that the element should encompass all of its content, regardless of whether that content is floated. In the case of an auto height on the container, it will spring back and expand to cover even floated content. This more elegant solution to the float clearing problem, as well as a number of other techniques, is covered in a follow-up to the PIE article by Alex Walker on Sitepoint (http:// www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/).