Stylesheets - Floating boxes don't extend containing box

Author

Floating boxes don't extend containing box

Ivor Somerset

2006-11-19, 7:35 pm

Dear CSS community,

The code below shows my problem.
I have a containing DIV box into which I place floating boxes.
As the background-color shows, the size of the containing box is not
extended by the inner floating boxes.
Without the float, it works as expected.
Why? What is it I am missing here about the CSS box model?

Thanks in advance for your help.

<html>
<head>
<title></title>
<style type="text/css">

</style>
</head>
<body>
<div class="d1">
<div class="d2"></div>
<div class="d2"></div>
<div class="d2"></div>
<div class="d2"></div>
</div>
</body>
</html>

Ben C

2006-11-19, 7:35 pm

On 2006-11-07, Ivor Somerset <someemail@hiddenembassy.com> wrote:
> Dear CSS community,
>
> The code below shows my problem.
> I have a containing DIV box into which I place floating boxes.
> As the background-color shows, the size of the containing box is not
> extended by the inner floating boxes.
> Without the float, it works as expected.
> Why? What is it I am missing here about the CSS box model?

See 10.6.7 of the CSS 2.1 spec, the bit about "block formatting context
roots", especially the last paragraph.

If you make the containing div also a float, it will be the BFC root for
the floats inside it, and extend to contain them. It should also do that
if you position it, or set any value of overflow other than visible,
although I've never tried that one. See 9.4.1 for definition of a BFC.

The fact that normal flow boxes don't extend to fit the floats is
desirable in cases where you have something like several paragraphs of
text flowing around an embedded floating diagram.

Noah Sussman

2006-11-19, 7:35 pm

Ivor Somerset wrote:
> Dear CSS community,
>
> The code below shows my problem.
> I have a containing DIV box into which I place floating boxes.
> As the background-color shows, the size of the containing box is not
> extended by the inner floating boxes.
> Without the float, it works as expected.

Try floating the container as well. Then the container will expand to
contain all of the floated elements inside it.

..d1 {float: left; display:block; width:700px; background-color:#666666;
padding:4px; }

> Why? What is it I am missing here about the CSS box model?

If you view your example as-is in IE, you'll see that the non-floated
container does expand to contain the floated elements. But in a
standards-compliant browser like Firefox, it doesn't work that way.

I found this explanation (registration required)
http://www.webmasterworld.com/forum83/5080.htm

Briefly, this is how the issue is described: "W3 compliant float
behavior does not allow containers to automatically enclose floats ...
compliant browsers like Moz/FF/NS require that you explicitly tell a
container to contain it's floated children."

There is also an example of similar behavior in the CSS 2 spec.
http://www.w3.org/TR/CSS21/visuren.html#floats

>
> Thanks in advance for your help.
>
> <html>
> <head>
> <title></title>
> <style type="text/css">
> 
> </style>
> </head>
> <body>
> <div class="d1">
> <div class="d2"></div>
> <div class="d2"></div>
> <div class="d2"></div>
> <div class="d2"></div>
> </div>
> </body>
> </html>

Gus Richter

2006-11-19, 7:35 pm

Ivor Somerset wrote:
>
> I have a containing DIV box into which I place floating boxes.
> As the background-color shows, the size of the containing box is not
> extended by the inner floating boxes.
> Without the float, it works as expected.
> Why? What is it I am missing here about the CSS box model?

That floats are out of the normal flow, therefore present no content to
the container.

--
Gus

Gus Richter

2006-11-19, 7:35 pm

Ben C wrote:
> On 2006-11-07, Ivor Somerset <someemail@hiddenembassy.com> wrote:
>
> See 10.6.7 of the CSS 2.1 spec, the bit about "block formatting context
> roots", especially the last paragraph.
>
> If you make the containing div also a float, it will be the BFC root for
> the floats inside it, and extend to contain them. It should also do that
> if you position it, or set any value of overflow other than visible,
> although I've never tried that one. See 9.4.1 for definition of a BFC.

In addition to working if you also float the container, it also works if
you position it _absolutely_ (or fixed), or set any value of overflow
other than visible.

> The fact that normal flow boxes don't extend to fit the floats is
> desirable in cases where you have something like several paragraphs of
> text flowing around an embedded floating diagram.