400811 - List items not rendered properly inside div, div lacks specified background color

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[Marius Hudea]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8.1.8) Gecko/20071008 Firefox/2.0.0.8
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8.1.8) Gecko/20071008 Firefox/2.0.0.8

Inside a div, I am placing 4 divs with the rule "float:left;". Inside these four divs there is a list in each one.
The parent div (the one that holds the four divs floating to the left) has no height, even though it should be as tall as the tallest div inside it.

The specified url ( http://www.definethis.org/temp/bugzilla/listitems/test.html ) shows what I mean and also shows a version of the same code but using tables, which appears fine.

Both versions appear fine in IE7 and the page validates with W3 validator.


Reproducible: Always

Steps to Reproduce:
1. Check specified website and see source code

Actual Results:  
The background of the parent div is not shown and using Firebug, it seems that the parent div has no height.

Expected Results:  
The four lists should appear nicely on the background of the parent div.

Comment 1

[Mats Palmgren (inactive)]

(In reply to comment #0)
> The parent div (the one that holds the four divs floating to the left) has no
> height, even though it should be as tall as the tallest div inside it.

The current layout is correct according to CSS 2.1.  Floats are not
in the flow and does not normally affect its container's size.
(This is a bug in IE.)  See last paragraph in 10.6.3:
http://www.w3.org/TR/CSS21/visudet.html#normal-block

You can add a <br style="clear:both"> after the floats to get the
desired layout. Or, you could set 'overflow' to a value different from
'visible' for the container DIV to make it establish a new block
formatting context.
http://www.w3.org/TR/CSS21/visuren.html#block-formatting
http://www.w3.org/TR/CSS21/visudet.html#root-height
http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow

-> INVALID

Comment 2

[Marius Hudea]

Thank you, 

I appreciate your answer and the suggestions inside your comment do fix the issues I have.

Thanks again.