Do you have a question? Post it now! No Registration Necessary. Now with pictures!
- Posted on
- floats and collapsing divs
September 13, 2007, 8:40 am
rate this thread
Suppose I have a footer div with a background colour and, in the footer,
I'd like to have some links on the left and a copyright notice on the
right. I'd do something like this:
padding: 4px 10px;
<div style="float: left">
<div style="float: right">
Copyright © 2007 MyComp
However, if I do this, the black background of the footer div
disappears. I know this is because the floated contents do not prop up
the footer container.
The only workarounds I know are to give #footer a height, which ruins
things when fonts are resized, or putting an element inside the footer,
after the other two div's, that is clear:both; but neither option is
Am I missing something here? What do you guys do?
Re: floats and collapsing divs
Those are both good ways, although not without their drawbacks as you
You can make the footer overflow:hidden.
Not because you care about what happens when it overflows but to make it
start a new block formatting context, and block formatting context roots
_do_ grow in height to fit floats in.