floats and collapsing divs

[JL]

Hi

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:

#footer {
color: #FFF;
background-color: #000;
padding: 4px 10px;
}

<div id="footer">
<div style="float: left">
<a href="#">Privacy Policy</a> | <a href="#">Site Map</a>
</div>
<div style="float: right">
Copyright &copy 2007 MyComp
</div>
</div>

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
satisfactory.

Am I missing something here? What do you guys do?

 

[Ben C]

Hi

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:

#footer {
color: #FFF;
background-color: #000;
padding: 4px 10px;
}

<div id="footer">
<div style="float: left">
<a href="#">Privacy Policy</a> | <a href="#">Site Map</a>
</div>
<div style="float: right">
Copyright &copy 2007 MyComp
</div>
</div>

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
satisfactory.

Those are both good ways, although not without their drawbacks as you
say.

Am I missing something here? What do you guys do?

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.

 

[dorayme]

The only workarounds I know are to give #footer a height, which ruins
things when fonts are resized,

Even when given in em?

 

[JL]

Those are both good ways, although not without their drawbacks as you
say.


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.

Works nicely in FF but not IE6. Is there a way to get this to work in IE6?

 

[JL]

Even when given in em?

No! Funnily enough I'd never thought of that.

I've tried this with height: 1.5em; but the text is vertically aligned
to the top of the container div. How do I vertically align the text in
the middle of the container?

 

[BootNic]

[snip]

#footer {
color: #FFF;
background-color: #000;
padding: 4px 10px; }

<div id="footer">
<div style="float: left">
<a href="#">Privacy Policy</a> | <a href="#">Site Map</a> </div>
<div style="float: right">
Copyright &copy 2007 MyComp </div> </div>

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.

[snip]
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.

Works nicely in FF but not IE6. Is there a way to get this to work in
IE6?

<!--[if lt IE 7]>
<style type="text/css">
#footer {
height:0;
overflow:visible;
}
</style>
<![endif]-->

 

[Bergamot]

Works nicely in FF but not IE6. Is there a way to get this to work in IE6?

add property

zoom: 1;

It's an IE proprietary property that other browsers ignore, but does
absolute wonders for pretty much all versions of IE.

 

[dorayme]

No! Funnily enough I'd never thought of that.

Try it, it worked well enough on your page, I gave it 1.5em. It
is simple at least.