IE hasLayout and Margins with Floats

These test show only singular instance of an element inside a container. The adverse effects when a container element has haslasyout only affects the margins of descendant elements that sit against (adjoining margins) the containers' containing block edge or padding edge if there is padding. Simply put, the top margin of the first child and the bottom margin of the last child of the parent container are the only margins affected.

Each example consists of:

1. Two empty divs with a grey background. Each is 10 pixels in height and purposely has no margins.
2. Between the two empty divs is a container (containing block) with a transparent grid background with lines spaced every 10 pixels. Each container has a left and right padding of 40 pixels. The first set of test have no top and bottom padding, the second set have a top and bottom padding of 10 pixels.
3. An inner element (descendant block), either being a paragraph, h3 heading or div. The paragraphs and headings and have there default vertical margins. The divs have vertical margins of 20px pixels. Each paragraph, h3 heading or div has a left and right margin of 60 pixels.

Floated Elements with margins inside containers

IE shows wrong behavior with the first two examples. The vertical margins of paragraph and heading have disappeared (wrong). The vertical margins of these descendant div element, stick out beyond it's container, thus pushing the container down from the grey div by 20 pixels and pushing the bottom grey div away from the container by 20 pixels (correct).

Floated Elements with margins inside hasLayout containers

IE shows wrong behavior for the next three examples. The container and descendant elements have hasLayout and this causes the paragraph and the headings' vertical margins and the divs' bottom margin to disappear (wrong). The divs' top margin does not collapse into the adjoining vertical margins of the container and stick out beyond the container, but are contained by the containers' content/padding edge (wrong). This should only happen if the container has padding or a border.

Floated Elements with margins inside containers with padding

IE shows wrong behavior for the first two examples. The descendant elements have hasLayout since they are floated and this causes the paragraph and the headings' vertical margins to disappear (wrong). The divs' vertical margins do collapse into the adjoining vertical margins of the container and stick out beyond the container (correct).

Floated Elements with margins inside hasLayout containers with padding

IE shows wrong behavior for the next three examples. The container and descendant elements have hasLayout and this causes the paragraph and the headings' vertical margins and the divs' bottom margin to disappear (wrong). In Example 4c, The container has hasLayout and this causes the divs' bottom margin not to collapse but be contained by the containers' padding edge (wrong). The divs' top margin is 20 pixels away from the container content edge (correct).

Please see the same test repeated but with static divs instead of floats.

Back to CSS Class tests.