Posted by Ben C on 09/13/07 12:47

On 2007-09-13, JL <user@example.net> 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.

• Next in forum: [OT: Book corner] was Re: Problem with "table" inside "p"
• Prev in forum: Re: Stopping robots searching particular page
• Thread view: Re: floats and collapsing divs

[Reply to this message]