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.
FLOAT CONTAINMENT: FLOATING
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%
;}
115
Figure 4-9: Using
float
to visually contain fl oated descendants.
Search WWH ::
Custom Search