IE7-/Opera Floats with block elements and margin collapsing

These tests show a common contruct when the first element in a container is a float which is followed in the source by a static block element with a top margin. What should happen is margins should collapse. These tests demonstrate that this doesn't not always happen in Internet Explorer. This bug is not present in IE8.

With example 1a IE7- shows correct behavior. The top margins of these descendant elements collapses and stick out beyond the 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.

1a. Paragraph (with default vertical margins)

With example 2a and 2b IE shows wrong behavior. The paragraphs' and divs' top margin does not collapse into the adjoining vertical margin of the container and stick out beyond the container, but are contained by the containers' content/padding edge due the presence of the float before it in the source. This should only happen if the container has padding or a border.

With example 2a and 2b Opera 9.24 shows wrong behavior. The paragraphs' and divs' top margin do collapse into the adjoining vertical margin of the container and stick out beyond the container, but the float top edge is situated at the margin edge of the container instead of it's content edge. This would only happen if there was no container enclosing the float and the paragraph or div for margin collapse to happen.

div floated left

2a. Paragraph

Space
div floated left
2b. Div

Passed: Gecko 1.7~1.9, Opera 9.50 and Safari 3 (beta)

Failed: Opera 9.24, IE5.5, IE6 & IE7

Below are some screenshots of how it should render (as in Firefox), and how it renders in Opera, IE7 and IE6.

Screenshot in Firefox

Screenshot in Firefox

Screenshot in Opera

Screenshot in Opera

Screenshot in IE7

Screenshot in IE7

Screenshot in IE6

Screenshot in IE6

Similar to the above examples, example 3a and 3b IE shows wrong behavior. In the first example the paragraphs' top margin has disappeared due to the container having hasLayout.

div floated left

3a. Paragraph (wrapper with hasLayout)

Space
div floated left
3b. Div (wrapper with hasLayout)

Example 4a and 4b IE shows correct behavior. The paragraphs' and divs' top margin does not collapse into the adjoining vertical margin of the container but are contained by the containers' content/padding edge. The same happens if the container has a border instead.

div floated left

4a. Paragraph

Space
div floated left
4b. Div
Space
div floated left

5a. Paragraph (wrapper with hasLayout)

Space
div floated left
5b. Div (wrapper with hasLayout)

The above example show one solution that renders the same in all modern browsers but the next example shows the best solution. Example 5a and 5b IE shows correct behavior. The paragraphs' and divs' top margin collapses into the adjoining vertical margin of the container. This is because the container itself also has top margin.

div floated left

6a. Paragraph (wrapper with top margin)

Space
div floated left
6b. Div (wrapper with top margin)

But if the container has hasLayout then both examples 6a and 6b will show wrong behavior though example 6a with the paragraph does render similar to that of other browsers.

div floated left

7a. Paragraph (wrapper with top margin and hasLayout)

Space
div floated left
7b. Div (wrapper with top margin and hasLayout)

Example 3b, 5a, 5b, 6a, 6b and 7b show the IE Margin Transference Bug. Please see IE hasLayout and Margins for more information about why the paragraphs' and divs' react differently in hasLayout containers. Microsoft documentation 2.2.23 [CSS-Level2-2009] of the bug.

Futher investigation with this bug.