When using div elements for layout, for example to produce a table like layout, often you have a div element with a collection of floated child div elements. The wrapper div does not expand to the height of all the floated contents. You may want a border around all the floated div elements or maybe some padding.
The Solution
Its really quite simple and its all described in the Clearing Floats section of the Quirksmode website. All you need to do is set overflow: auto quite straight forward. Specifying the width or height is required for some browsers.
| |
| div.container { |
| padding-bottom: 20px; |
| overflow: auto; |
| width: 100% |
| } |
| |
The Result
I always forget this, which prompted me to write this in today.
Thursday January 29 2009 06:50 p.m.