Closed
Bug 514035
Opened 16 years ago
Closed 16 years ago
weird clearing of float divs
Categories
(Firefox :: General, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: thierry, Unassigned)
References
()
Details
Attachments
(2 files)
User-Agent: Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.13) Gecko/2009080315 Ubuntu/9.04 (jaunty) Firefox/3.0.13
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.13) Gecko/2009080315 Ubuntu/9.04 (jaunty) Firefox/3.0.13
when using css float: right; clear: right; and float: left; clear: left; blocks floating right get also cleared to the left... (Am I clear about that ?)
Reproducible: Always
Expected Results:
The blocks should pile up perfectly on the left and right sides with no blank spaces (in height) between them.
IE7 displays it as expected
Safari 4 for PC displays it badly (exactly as Firefox)
|
||
Comment 1•16 years ago
|
||
Can you attach a minimal testcase illustrating what you mean ?
If Safari also shows the same behaviour as Firefox, chances are that the behaviour is correct / per the spec (and this bug invalid). IE 7 is known to have a pretty broken behaviour with clear. Did you try IE 8 - in standards mode ?
|
Reporter | |
Comment 2•16 years ago
|
||
Here is a sample html file
BlockD should be under blockb (with no space between them)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#conteneur {margin: 0 auto; width: 800px;}
#blocka, #blockc {float: left; clear: left; width:50%}
#blockb, #blockd {float: right; clear: right; width:50%}
#blocka {height: 50px; background-color: red;}
#blockb {height: 20px; background-color: blue;}
#blockc {height: 50px; background-color: green;}
#blockd {height: 50px; background-color: yellow;}
</style>
</head>
<body>
<div id="conteneur">
<div id="blocka">
blockA
</div>
<div id="blockb">
blockB
</div>
<div id="blockc">
blockC
</div>
<div id="blockd">
blockD
</div>
</div>
</body>
</html>
|
|
||
Comment 3•16 years ago
|
||
Opera 10,Gecko (Firefox 3.0.x, 3.5.x, nighty builds), WebKit (Safari 3.0, 4.0, nightly builds, Chromium) and IE 8 all agree: there should be a space below block B.
Unsurprisingly, that is also what CSS 2:1 specifies:
http://www.w3.org/TR/CSS21/visuren.html#float-position
http://www.w3.org/TR/CSS21/visuren.html#flow-control
Status: UNCONFIRMED → RESOLVED
Closed: 16 years ago
Resolution: --- → INVALID
|
|
||
Comment 4•16 years ago
|
||
|
|
Reporter | |
Comment 5•16 years ago
|
||
Here is what http://www.w3.org/TR/CSS21/visuren.html#flow-control says :
<quote>
The top outer edge of the float must be below the bottom outer edge of all earlier left-floating boxes (in the case of 'clear: left'), or all earlier right-floating boxes (in the case of 'clear: right'), or both ('clear: both').
</quote>
Blockd (which is clear: right;) should NOT be below the bottom outer edge of blockA (which is float: left) but immediately below the bottom outer edge of BlockB (which is float: right;)
|
|
Reporter | |
Comment 6•16 years ago
|
||
This works (I simply inverted heights of blocks A and B). So why would the other NOT work as expected ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#conteneur {margin: 0 auto; width: 800px;}
#blocka, #blockc {float: left; clear: left; width:50%}
#blockb, #blockd {float: right; clear: right; width:50%}
#blocka {height: 20px; background-color: red;}
#blockb {height: 50px; background-color: blue;}
#blockc {height: 50px; background-color: green;}
#blockd {height: 50px; background-color: yellow;}
</style>
</head>
<body>
<div id="conteneur">
<div id="blocka">
blockA :float: left; clear: left;
</div>
<div id="blockb">
blockB: float: right; clear: right;
</div>
<div id="blockc">
blockC : float: left; clear: left;
</div>
<div id="blockd">
blockD : float: right; clear: right;
</div>
</div>
</body>
</html>
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
|
|
||
Comment 7•16 years ago
|
||
In the future, please *attach* testcases using the '' above, like I've done in comment 4.
under 9.5.1, point 5 in the ordered list:
<quote>
The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
</quote>
There is a difference between the 2 testcases. In your first testcase, 'block C' prevents 'block D' from going higher than the top edge of 'block C'. Not so in the second testcase.
Status: UNCONFIRMED → RESOLVED
Closed: 16 years ago → 16 years ago
Resolution: --- → INVALID
|
|
Reporter | |
Comment 8•16 years ago
|
||
|
|
Reporter | |
Comment 9•16 years ago
|
||
Thanks for the analysis. I understand the point so it appears to me that it is a bug in the specs... :)
You need to log in
before you can comment on or make changes to this bug.
Description
•