IE6: un-contained float and its bounding rectangle

If a layout element has contents, the layout of its contents is determined by its bounding rectangle.

(MSDN).

wrapper with layout

layout parent, margin: 0 25px 0 50px;

left-floated child without dimensions

element inside which has layout


A: this is not conformant to the CSS float specs. The olive layout parent "contains" the red float.

Note: for illustration, all containers have 2px padding. See the <hr> gets the same auto width in all examples.

wrapper with layout

parent without layout, margin: 0 25px 0 50px;

left-floated child without dimensions

element inside which has layout


B: The blue grandchild forces the red child to gain the width of the bounding box: but the bounding box is the content area of the orange wrapper in A! The gray parent's 25px margin-right is then applied to the right. In effect, the orange wrapper is expanded by: the applied 50px margin-left and 25px margin-right. Other elements in the flow like the white <hr> or this description do not expand, they act as if the orange wrapper wasn't expanded.

wrapper with layout

parent without layout, margin: 0 25px 0 50px;

left-floated child without dimensions, r.p. offset to the left

element inside which has layout


C: The blue grandchild forces the red child to gain the width of the bounding box: illustrated by relatively positioning.

wrapper with layout

parent without layout, margin: 0 25px 0 50px;

right-floated child without dimensions

element inside which has layout


D: Right-floated teal child. Still not good.

created: May 9, 2005, updated July 1, 2005 / Ingo Chao