«

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?

On 2007-09-13, JL <> wrote:
> 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.

In article <>,
JL <> wrote:

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

Even when given in em?

--
dorayme

Ben C wrote:
> On 2007-09-13, JL <> wrote:
>> 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.

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

dorayme wrote:
> In article <>,
> JL <> wrote:
>
>> The only workarounds I know are to give #footer a height, which ruins
>> things when fonts are resized,
>
> 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?

JL <> wrote: news::

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

--
BootNic Saturday September 15, 2007 9:56 AM
They always say time changes things, but you actually have to change
them yourself.
*Andy Warhol*

JL wrote:
> Ben C wrote:
>>
>> 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?

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.

--
Berg

In article <>,
JL <> wrote:

> dorayme wrote:
> > In article <>,
> > JL <> wrote:
> >
> >> The only workarounds I know are to give #footer a height, which ruins
> >> things when fonts are resized,
> >
> > Even when given in em?
>
> 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.

--
dorayme