286140 - clear:both doesn't work with simple <div>

Status: RESOLVED WORKSFORME

(Core :: Layout: Floats, defect)

Description

[derek doda]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1

I don't know for sure if this is an error, or if this is standard compliant.  If
it is standard compliant, I would like to comment that it's a **** standard,
and that the standard should be changed.

Anway, if it is standard compliant, the I apologize for waisting your time.

There are three divs in the URL that I posted.  Each div contains 2 floating
divs, and another div that uses style="clear:both".  All three of the main divs
have a background. 

Except the only way to get "clear:both" to work, is if you add a "border:1px
solid #XXXX" or "padding:X".  In the html page that I created, if you move the
last <div></div> to the top of the page, you will see the other divs rendering
over it/with it.  

It's my understanding that clear:both, moves the bottom of the original
container to under neath the floats, and thus, clearing the container of floats.
  This should we be working any time there is a float.


Reproducible: Always

Steps to Reproduce:
1.create a div with style="background-color:#dddddd;"
2.create 2 floater divs inside the original div:
  <div style="float:left">left text</div><div style="float:right">right text</div>
3.And finish off the main div container by adding a clearing div.  <div
style="clear:both"></div>



Actual Results:  
The clear:both does not do what it's supposed to.   It does not pull the bottom
of the container to underneath the floating divs.  It also doesn't clear the
container of floating points.  So when you add html under the main div, it is
still stuck in the floats.

Expected Results:  
Moved the end of the div to below the floating divs, and cleared the div of
floats.  So right afterwards, if you had some text, it would appear underneath
the div and not inside of it.

I apologize if this is a standard.  I just can't imagine that it is a standard.
 If it is, then this bug should reperesent how moronic that standard is.  Or is
it simply a bug in mozilla's CSS?  The only reason why I say that it might be a
standard is because it's such a simple part of CSS that I can't imagine how the
bug got past the developers.

Comment 1

[derek doda]

Attachment: error in CSS with clear:both

test case of a possible clear:both bug

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Moving to correct component.  Better descriptions of actual and expected results
would be nice -- rather than repeating the description of the bug, say what to
look for in the testcase to tell if the bug is fixed.  Also, you're testing on a
layout engine that's almost a year old -- did you test on the trunk?

Comment 3

[Richard Brodie]

Behaviour has changed for sure since Firefox 1.0.1 ; I'm fairly convinced this
is a WFM (Gecko/20050314 Firefox/1.0+)

Comment 4

[derek doda]

(In reply to comment #2)
> Moving to correct component.  Better descriptions of actual and expected results
> would be nice -- rather than repeating the description of the bug, say what to
> look for in the testcase to tell if the bug is fixed.  Also, you're testing on a
> layout engine that's almost a year old -- did you test on the trunk?


My apologize, let me see if I can do a bit better then what I wrote:

Actual results:
In the test case (the attached html file, or the URL I provided) the last
<div></div> should have a red background appearing behind it.  The two divs
above it both have backgrounds behind them.  The background is not appearing
because clear:both is being ignored in this cicrumstance.  If you move the last
div to top, so that it is the first thing rendered, the other divs render over
AND in it. 

Expected resutls:
To have a red background behind the last div.  Also if you move the last div to
the top (so that it is renedered first), it should render just like the other
divs, and the other divs should render BELOW it, and not IN it.

I have not tested it in anything but 1.0.1 in firefox. 

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Duplicate of something roc fixed a few months ago.