LAYOUTS - CSS: Professional Techniques for Modern Layout - page 111

FLOAT CONTAINMENT: OVERFLOW
Since l oats are such an important part of current CSS layout, it's ot en the case that you need
to have an element that contains some l oats that stretch around them. h is doesn't happen
by default (for some perfectly good reasons; see the i rst part of http://complexspiral
.com/publications/containing-floats/ for details) so you can get situations like
the following:
div#main { border : 2px dashed gray ; background : #9AC ;}
div.column { float : left ; width : 28% ;
padding : 0 1% ; margin : 0 1% ;}
See that dashed line above the top of the columns in Figure 4-7? h at's the full border around
div#main . It's just that the div is zero pixels tall with the l oated column div s sticking out
of it. (Again, this is not a bug or a l aw in CSS; see the previously cited URL for an explanation
as to why.)
113
Figure 4-7: A collapsed box failing to visually contain its fl oated descendants.
A number of options will get div#main to “stretch around” the l oated columns. h e
simplest is to exploit the behavior of overflow (see Figure 4-8).
div#main { border : 2px dashed gray ; background : #9AC ;
overflow : auto ;}