|
|
Posted by JL on 09/15/07 06:27
Ben C wrote:
> 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 © 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?
Navigation:
[Reply to this message]
|