Graphics Programs Reference
In-Depth Information
h ere's one more thing to be wary about: h e value of auto for overflow means that a
browser could, if it decided it was necessary, place scrollbars on div#main . h is doesn't seem
to come up in practice, but there have been sporadic reports of accidental scrollbar invocation
and it's something to keep an eye out for, just in case.
Another technique for containing l oats is to l oat the container.
div#main { border : 2px dashed gray ; background : #9AC ;
float : left ;}
div.column { float : left ; width : 28% ;
padding : 0 1% ; margin : 0 1% ;}
h is works because l oats are dei ned to contain any l oated descendant elements. h ey're also
dei ned to be as wide as necessary for their contents, and no wider. In this particular case, that
can be dangerous: h e columns are set to be one-third the width of div#main , but because it
has been l oated, the browser gets to decide how wide or narrow div#main gets to be. h e
result is unpredictable.
h is is easily i xed by giving div#main an explicit width (see Figure 4-9):
div#main { border : 2px dashed gray ; background : #9AC ;
float : left ; width : 100% ;}
Figure 4-9: Using float to visually contain fl oated descendants.
Search WWH ::

Custom Search