216144 - Nested div's with float:left not displaying correctly

Status: RESOLVED INVALID

(Core :: Layout: Floats, defect)

Description

[Joe Bayes]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.4b) Gecko/20030516 Mozilla Firebird/0.6
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.4b) Gecko/20030516 Mozilla Firebird/0.6

In the page http://www.potrerowar.org/, the text under "News and Information"
should be in the first column, and the text in the third column should be in the
second column. I will attach a file which demonstrates the problem. Note that
removing the "float: left" from the style section fixes the problem. 

Inserting <br clear="all"> right before the "mid" div also fixes the problem. 

If this is proper behavior, I apologize, but it seems counterintuitive. It seems
like the "mid" div should be *outside* the "top" div. 

Reproducible: Always

Steps to Reproduce:
1. Load attached file in browser
2.
3.

Actual Results:  
Purple box was displayed to right of brown box. 

Expected Results:  
Purple box should be displayed below brown box.

Comment 1

[Gilles Durys]

*** Bug 216145 has been marked as a duplicate of this bug. ***

Comment 2

[Joe Bayes]

Attachment: test case to show bug

Sorry about the dup submission. Network problems.

Comment 3

[Richard Brodie]

This all looks fine to me. If you use positioning properties, then the layout of
the boxes may not necessarily reflect the document hierarchy.

In your test, the mid div *is* outside the top div. Put borders on it, and
you'll see. The topleft div doesn't count, exactly because you've floated it.

See: http://www.w3.org/TR/CSS21/visuren.html#floats

Comment 4

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

This is the way floats are supposed to work.  See
http://www.w3.org/TR/CSS21/visuren.html#floats for more detail.

Comment 5

[Joe Bayes]

Okay, my bad, sorry. It still seems counterintuitive when things pop outside
their containing boxes willy-nilly, though.