floats and collapsing divs
floats and collapsing divs
am 13.09.2007 10:40:18 von Shion
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;
}
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?
Re: floats and collapsing divs
am 13.09.2007 14:47:24 von Ben C
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;
> }
>
>
>
> 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.
Re: floats and collapsing divs
am 14.09.2007 00:58:15 von dorayme
In article <5ksbcbF5670fU1@mid.individual.net>,
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
Re: floats and collapsing divs
am 15.09.2007 08:27:19 von Shion
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;
>> }
>>
>>
>>
>> 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?
Re: floats and collapsing divs
am 15.09.2007 08:30:33 von Shion
dorayme wrote:
> In article <5ksbcbF5670fU1@mid.individual.net>,
> 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?
Re: floats and collapsing divs
am 15.09.2007 15:56:43 von BootNic
JL wrote: news:5l1cacF5pa82U1@mid.individual.net:
[snip]
>>>
>>> #footer {
>>> color: #FFF;
>>> background-color: #000;
>>> padding: 4px 10px; }
>>>
>>>
>>>
>>> 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?
--
BootNic Saturday September 15, 2007 9:56 AM
They always say time changes things, but you actually have to change
them yourself.
*Andy Warhol*
Re: floats and collapsing divs
am 15.09.2007 18:19:43 von Bergamot
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
Re: floats and collapsing divs
am 16.09.2007 00:55:06 von dorayme
In article <5l1cgeF5qnr4U1@mid.individual.net>,
JL wrote:
> dorayme wrote:
> > In article <5ksbcbF5670fU1@mid.individual.net>,
> > 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