Kathy Lin

A common problem I’ve run into when dealing with float based CSS layouts is that the float’s container doesn’t stretch to “include” the other two floats. For instance, if a two column layout was done by putting two different div’s in a container the container div wouldn’t stretch to enclose the other two.

Here are some solutions to that problem that describe the problem itself in more detail. I decided to link them in case I forgot about them.

• Clearing Floats without Structural Markup – This uses CSS 2.0 and the :after psuedo-class.
• Clearing Floats – A nice, simple solution that doesn’t require putting that extra empty “clear:both” div tag after the containers that require clearing.