background of containing block doesn't extend to child floating blocks

[kent]

Hi,

For the code below, only "aaa" has a red background but "bbb" and
"ccc" don't have it:

<div style="background: red">aaa
<div style="float:left">bbb</div>
<div style="float:left">ccc</div>
</div>

In order for the red background to extend to "bbb" and "ccc", I have
to make "aaa" a float too:

<div style="background: red; float:left">aaa
<div style="float:left">bbb</div>
<div style="float:left">ccc</div>
</div>

This behavior exists in both IE 7 and FF 2.0. Any idea why it is so? I
can't find any support for
this behavior in the CSS spec. Any help is much appreciated!

Thanks!

[Ben C]

On 2007-06-02, ke**@cpttm.org.mo <ke**@cpttm.org.mowrote:

Hi,

For the code below, only "aaa" has a red background but "bbb" and
"ccc" don't have it:

<div style="background: red">aaa
<div style="float:left">bbb</div>
<div style="float:left">ccc</div>
</div>

In order for the red background to extend to "bbb" and "ccc", I have
to make "aaa" a float too:

<div style="background: red; float:left">aaa
<div style="float:left">bbb</div>
<div style="float:left">ccc</div>
</div>

This behavior exists in both IE 7 and FF 2.0. Any idea why it is so? I
can't find any support for
this behavior in the CSS spec. Any help is much appreciated!

In both examples, the inner divs have transparent backgrounds (the
default). In the second example, the containing div extends in height to
fit the floats in, and you can therefore see its red background through
the transparent backgrounds of the two inner divs.

In the first example the height of the container is zero, which is why
you don't see any red. It still has a red background in principle, but
zero area.

A float grows to fit the floats inside because it's a "block formatting
context root". This is in the CSS 2.1 spec, but you have to look quite
closely to find it.

See 9.4.1 "Floats [...] establish new block formatting contexts" and
then 10.6.7 "'Auto' heights for block formatting context roots [..] if
the element has any floating descendants whose bottom margin edge is
below the bottom, then the height is increased to include those edges."

[kent]

On Jun 3, 2:31 am, Ben C <[e-mail]:

A float grows to fit the floats inside because it's a "block formatting
context root". This is in the CSS 2.1 spec, but you have to look quite
closely to find it.

See 9.4.1 "Floats [...] establish new block formatting contexts" and
then 10.6.7 "'Auto' heights for block formatting context roots [..] if
the element has any floating descendants whose bottom margin edge is
below the bottom, then the height is increased to include those edges."

Hi Ben,

Thanks a lot for your explanation! It has been very helpful! Basically
what it
means is that if a paragraph contains a floating tall image, the
height of
that paragraph does NOT take into account that of the image, so that
the
image could "stick into" the next paragraph. However, if the first
paragraph is
a float itself, it will be moved around so its height should include
that of the
image.

[Ben C]

On 2007-06-03, ke**@cpttm.org.mo <ke**@cpttm.org.mowrote:

On Jun 3, 2:31 am, Ben C <[e-mail]:

>A float grows to fit the floats inside because it's a "block formatting
context root". This is in the CSS 2.1 spec, but you have to look quite
closely to find it.

See 9.4.1 "Floats [...] establish new block formatting contexts" and
then 10.6.7 "'Auto' heights for block formatting context roots [..] if
the element has any floating descendants whose bottom margin edge is
below the bottom, then the height is increased to include those edges."

Hi Ben,

Thanks a lot for your explanation! It has been very helpful! Basically
what it means is that if a paragraph contains a floating tall image,
the height of that paragraph does NOT take into account that of the
image, so that the image could "stick into" the next paragraph.
However, if the first paragraph is a float itself, it will be moved
around so its height should include that of the image.

You got it.