254136 - div overlap if clear:both not defined

Status: RESOLVED INVALID

(Core :: Layout: Block and Inline, defect)

Description

[Luke Alexander]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7) Gecko/20040626 Firefox/0.9.1
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7) Gecko/20040626 Firefox/0.9.1

content should look like http://www.pudor.co.uk/demo/testlayout.html, but
instead the last two divs are rendered half way through the main div.  

Reproducible: Always
Steps to Reproduce:
see below
Actual Results:  
http://www.pudor.co.uk/demo/testlayout2.html

Expected Results:  
http://www.pudor.co.uk/demo/testlayout.html

Could be related to the inline width elements specified in the html above, but
have been unable to isolate it specifically.  Works fine if clear:both is
specified for any divs further on down the page.

Comment 1

[Mats Palmgren (inactive)]

This is the correct layout since floats are not part of the normal flow.
You have to specify 'clear:both' on later blocks if you don't want them to
overlap (i.e. their background), it's only the line boxes that flows around
the float.   See http://www.w3.org/TR/CSS21/visuren.html#floats

You can better see what is happening if you remove the hard-coded 'height: 1em'
you have, then you'll see that the blocks increase their height so that the
text can be moved after the floats. With an explicit height like that the moved
line boxes will actually become overflow.

Comment 2

[Mats Palmgren (inactive)]

Attachment: Testcase

Comment 3

[Mats Palmgren (inactive)]

Attachment: Same testcase, but without explicit height

Comment 4

[Mats Palmgren (inactive)]

-> INVALID