(MSDN).If a layout element has contents, the layout of its contents is determined by its bounding rectangle.
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