Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Pew Pew Laser Blog Archives — by Blog ID

CSS Magic: Containing floats (clear-fixing) with overflow: auto;.


Very Tall Image with Kitten Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, soluta, unde, minima dolorum vel molestias in quos beatae sequi harum eos ipsam nam debitis. Pariatur debitis enim blanditiis repellat sunt.

A floated element (like the kitten above) is removed from the flow of the document, and thus its parent element (the paragraph above with the border) won't contain it. If only floated children exist within a parent, that parent won't have any height. Since this standard behavior of CSS is sometimes undesirable, it is sometimes necessary to manually contain floated children.

Back in 2007 (when IE7 was newly released), it took a fair amount of effort to get an element to completely surround its floated children. However, today's browser landscape offers a simpler solution:

.parent { overflow: auto; }

That's it. One standard CSS declaration will cause parents to expand to contain their floated children. This works for Internet Explorer 7 and higher; IE6 and lower require several additional lines of CSS.


Tags: code css web-development

Authorized users may log-in to leave a comment.

Last Blog: The Perfect S'more.

Next Blog: ST Logging Keyboard Commands.