Back to Top
The nuts and bolts for
Creative web development

Simple Clearing of Floats

The problem: One of the simplest and most common layout structures involves the placing of a small, set-width DIV -- perhaps navigation, a quote or a bio -- within a larger wrapping DIV that contains the remaining content.

However, if the inner DIV grows taller than it's wrapping parent, it breaks through the bottom edge of outer wrapping. It's as if the outer DIV forgets it's supposed to be keeping tabs on what the inner DIV is doing as soon as you float it.

Extra info on Horizontal overflow Added 5/3/05
Also check out this update to see how this solution affects sideways or horizontal overflow.

Read the full article

Share this Article