- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Tue, 5 Oct 2010 17:19:00 -0700
- To: www-style list <www-style@w3.org>
Rule 7 - Summary of the Problem
===============================
Same as with rule 3, it appears that all browsers only consider floats
that are both in the same BFC and that intersect the float's parent
Testcases
=========
Basic behavior, correct per spec in all browsers:
<!doctype html>
<div id=container>
<div id=leftfloat1></div>
<div id=parent>
<div id=leftfloat2></div>
</div>
</div>
<style>
#container {
width: 400px;
height: 400px;
background: yellow;
}
#leftfloat1 {
width: 100px;
height: 100px;
background: green;
float: left;
}
#leftfloat2 {
width: 350px;
height: 100px;
background: blue;
float: left;
}
#parent {
width: 320px;
height: 250px;
margin-left: auto;
border: 3px dotted black;
}
</style>
Incorrect behavior, consistent in all browsers:
<!doctype html>
<div id=container>
<div id=leftfloat1></div>
<div id=parent>
<div id=leftfloat2></div>
</div>
</div>
<style>
#container {
width: 400px;
height: 400px;
background: yellow;
}
#leftfloat1 {
width: 100px;
height: 100px;
background: green;
float: left;
}
#leftfloat2 {
width: 350px;
height: 100px;
background: blue;
float: left;
}
#parent {
width: 280px;
height: 250px;
margin-left: auto;
border: 3px dotted black;
}
</style>
A final case demonstrating that only the parent matters:
<!doctype html>
<div id=container>
<div id=leftfloat1></div>
<div id=grandparent>
<div id=parent>
<div id=leftfloat2></div>
</div>
</div>
</div>
<style>
#container {
width: 400px;
height: 400px;
background: yellow;
}
#leftfloat1 {
width: 100px;
height: 100px;
background: green;
float: left;
}
#leftfloat2 {
width: 350px;
height: 100px;
background: blue;
float: left;
}
#parent {
width: 280px;
height: 250px;
margin-left: auto;
border: 3px dotted black;
}
#grandparent {
width: 320px;
height: 300px;
margin-left: auto;
border: 3px dashed gray;
}
</style>
Suggested Change
================
Current text:
# A left-floating box that has another left-floating
# box to its left may not have its right outer edge
# to the right of its containing block's right edge.
# (Loosely: a left float may not stick out at the
# right edge, unless it is already as far to the left
# as possible.) An analogous rule holds for
# right-floating elements.
Suggested text:
| A left-floating box that has another left-floating
| box to its left, where the latter box's right edge
| is to the right of the original left-floating box's
| parent box's left edge, may not have its right outer
| edge to the right of its containing block's right
| edge. (Loosely: a left float may not stick out at
| the right edge, unless it is already as far to the
| left as possible.) An analogous rule holds for
| right-floating elements.
~TJ
Received on Wednesday, 6 October 2010 00:44:13 UTC