227948 - Div surrounding several floated images doesn't contain the floated elements

Status: RESOLVED INVALID

(Core :: Layout: Floats, defect)

Description

[Scott Baker]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.5) Gecko/20031007 Firebird/0.7
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.5) Gecko/20031007 Firebird/0.7

The example URL contains several floated images in an attempt to make an image
gallery.  There is a large DIV around all the images that does not contain the
floated images.  Hence the box only shows surrounding the text at the top of the
box.  

This behavior is apparent in Mozilla 1.5 and Firebird 0.7.  Opera and IE 6.0
display the surrounding div as containing the floated images.  As far as I can
tell this is valid HTML (according to the RFC). 

Reproducible: Always

Steps to Reproduce:
1. Open Test Case
Actual Results:  
The surrounding does not enclose the floated images, only the test text.

Expected Results:  
The surrounding div should inlcude the text as well as all the thumbnails.

Comment 1

[José Jeria]

This is correct as far as I know. Floats are "removed" from the flow, see:
http://www.w3.org/TR/REC-CSS1#floating-elements

You have to add <div style="clear:both;"></div> to the end of the body_frame div
to achive what you want.

Comment 2

[Anne (:annevk)]

Marking INVALID per comment 1, besides, you should read the CSS and HTML
specification more carefully, since your complete document is relying on
Mozilla's quirk rendering mode.