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

Figure 4-9 looks the same as Figure 4-8, doesn't it? And yet the two were generated using
dif erent CSS. h is is one of those places where you have more than one way to get to the
same result, and choosing which is a matter of preference and the project in question.
Once again, div#main will stick out a little bit farther to the right (by four pixels) due to the
values for width and border . Because l oats aren't in the normal l ow, though, we can't just
assign width: auto and be done with it. Doing that with a l oated element just means it
will be as wide or narrow as the browser decides is necessary.
Also, when you l oat a box like this, you run the risk of following normal-l ow content
running up next to it. To prevent that, you probably want to clear whatever element comes
at er. If that's a known element, you can just assign it, something like this (assuming the footer
always comes at er div#main ):
div#footer { clear : left ;}
If you don't know for sure that the same element will always follow div#main , then you can
use the adjacent-sibling combinator with the universal selector (see Figure 4-10):
div#main + * { clear : left ;}
116
Figure 4-10: Using adjacent siblings and clear to push the footer below fl oated columns.