ref: correcting the overflow property ~ correct behaviour per CSS2.1 in how to deal with floated descendants

To demonstrate the overflow behaviour that should also "contain" floats

The parent block, outer container div has a yellow background color applied and desired behaviour is that is should increase it's height to contain the tallest float ~ this should happen when the overflow value does not compute to "visible" (demo#2)

1. the container has no form of clearance applied and acts as normal

this is float, this is float, this is float
this is float, this is float, this is float, this is float, this is float, this is float

2. the container has had overflow: set to auto, this works in compliant browsers

this is float, this is float, this is float
this is float, this is float, this is float, this is float, this is float, this is float

3. the container has had layout applied to produce the desired behaviour for IE

this is float, this is float, this is float
this is float, this is float, this is float, this is float, this is float, this is float

references:

10.6.6 Block-level, non-replaced elements in normal flow when 'overflow' does not compute to 'visible'; 'inline-block', non-replaced elements; and floating, non-replaced elements

If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0. If 'height' is 'auto', the height depends on the element's descendants.

For 'inline-block' elements, the margin box is used when calculating the height of the line box.

Which leads to: "10.6.7 'Auto' heights for block formatting context roots"

In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Only floats that are children of the element itself or of descendants in the normal flow are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

Return to IE Demos