469,947 Members | 2,176 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,947 developers. It's quick & easy.

Floating boxes don't extend containing box

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">
<!--
..d1 {display:block; width:700px; background-color:#666666; padding:4px;}
..d2 {display:block; float:left; background-color:#FF6666; width:200px;
height:20px; margin:2px;}
-->
</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>
Nov 7 '06 #1
4 2718
On 2006-11-07, Ivor Somerset <so*******@hiddenembassy.comwrote:
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.
Nov 7 '06 #2
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">
<!--
.d1 {display:block; width:700px; background-color:#666666; padding:4px;}
.d2 {display:block; float:left; background-color:#FF6666; width:200px;
height:20px; margin:2px;}
-->
</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>
Nov 7 '06 #3
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
Nov 7 '06 #4
Ben C wrote:
On 2006-11-07, Ivor Somerset <so*******@hiddenembassy.comwrote:
>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.
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.
Nov 7 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

16 posts views Thread by Michael Bernstein | last post: by
8 posts views Thread by Dennis C. Drumm | last post: by
10 posts views Thread by 63q2o4i02 | last post: by
8 posts views Thread by vendredi5h | last post: by
6 posts views Thread by dave8421 | last post: by
7 posts views Thread by Allie | last post: by
5 posts views Thread by Adam Smith | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.