weird clearing of float divs

RESOLVED INVALID

Status

()

Firefox
General
RESOLVED INVALID
8 years ago
8 years ago

People

(Reporter: Thierry Kauffmann, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(2 attachments)

(Reporter)

Description

8 years ago
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

8 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

8 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

8 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
Last Resolved: 8 years ago
Resolution: --- → INVALID

Comment 4

8 years ago
Created attachment 398100 [details]
testcase from comment 2
(Reporter)

Comment 5

8 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

8 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

8 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
Last Resolved: 8 years ago8 years ago
Resolution: --- → INVALID
(Reporter)

Comment 8

8 years ago
Created attachment 398114 [details]
testcase2
(Reporter)

Comment 9

8 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.