Closed Bug 514035 Opened 15 years ago Closed 15 years ago

weird clearing of float divs

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Platform:
x86
Linux
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: thierry, Unassigned)

References

(
URL
)

Details

Attachments

(2 files)

testcase from comment 2
723 bytes, text/html
Details
testcase2
977 bytes, text/html
Details 
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)
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 ?
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>
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: 15 years ago
Resolution: --- → INVALID
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;)
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 → ---
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: 15 years ago → 15 years ago
Resolution: --- → INVALID
Attached file testcase2 — 

    
    

    
  
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.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: