Margins and block formating contexts (original article from Florent Verschelde)

Test 1 (1 float)

This yellow square is floated left and it has no margin.

This orange rectangle:
– establishes a new block formating context thanks to the CSS declaration overflow: hidden;
– has a 100px left margin and a 100px right margin;

This orange rectangle:
– establishes a new block formating context thanks to the CSS declaration overflow: hidden;
– has a 100px left margin and a 100px right margin;

Results of test 1:

Internet Explorer 8: correct: the orange rectangle has a 100px rendered gap on its right.
Internet Explorer 9: [TBD]
Firefox 10.0.2: correct: the orange rectangle has a 100px rendered gap on its right.
Opera 11.61: correct: the orange rectangle has a 100px rendered gap on its right.
Chrome 17.0.963.56: incorrect: the orange rectangle has a 200px rendered gap on its right.
Safari 5.1.2: incorrect: the orange rectangle has a 200px rendered gap on its right.
Konqueror 4.8.0: incorrect: the orange rectangle has a 200px rendered gap on its right.

Test 2 (1 float)

This yellow square is floated left and it has no margin.

This orange rectangle:
– establishes a new block formating context thanks to the CSS declaration overflow: hidden;
– has a 200px left margin;

This orange rectangle:
– establishes a new block formating context thanks to the CSS declaration overflow: hidden;
– has a 200px left margin;

Results of test 2:

Internet Explorer 8: correct: the orange rectangle has no rendered gap on its right.
Internet Explorer 9: [TBD]
Firefox 10.0.2: correct: the orange rectangle has no rendered gap on its right.
Opera 11.61: correct: the orange rectangle has no rendered gap on its right.
Chrome 17.0.963.56: incorrect: the orange rectangle has a 200px rendered gap on its right.
Safari 5.1.2: incorrect: the orange rectangle has a 200px rendered gap on its right.
Konqueror 4.8.0: incorrect: the orange rectangle has a 200px rendered gap on its right.

Test 3 (1 float)

This yellow square is a floated left and it has a right margin of 100px.

This orange rectangle:
– establishes a new block formating context thanks to the CSS declaration overflow: hidden;
– has a 0px left margin and a 100px right margin;

This orange rectangle:
– establishes a new block formating context thanks to the CSS declaration overflow: hidden;
– has a 0px left margin and a 100px right margin;

Results of test 3:

Internet Explorer 8: correct: the orange rectangle has a rendered 100px gap on its left and a rendered 100px gap on its right.
Internet Explorer 9: [TBD]
Firefox 10.0.2: correct: the orange rectangle has a rendered 100px gap on its left and a rendered 100px gap on its right.
Opera 11.61: correct: the orange rectangle has a rendered 100px gap on its left and a rendered 100px gap on its right.
Chrome 17.0.963.56: correct: the orange rectangle has a rendered 100px gap on its left and a rendered 100px gap on its right.
Safari 5.1.2: correct: the orange rectangle has a rendered 100px gap on its left and a rendered 100px gap on its right.
Konqueror 4.8.0: correct: the orange rectangle has a rendered 100px gap on its left and a rendered 100px gap on its right.

Test 4 (2 floats)

This yellow square is floated left and it has no margin.

This yellow square is a floated right and it has no margin.

Results of test 4:

Internet Explorer 8: correct: the left and right margins are rendered under the floats; the orange rectangle has no rendered gap on its right.
Internet Explorer 9: [TBD]
Firefox 10.0.2: correct: the left and right margins are rendered under the floats; the orange rectangle has no rendered gap on its right.
Opera 11.61: correct: the left and right margins are rendered under the floats; the orange rectangle has no rendered gap on its right.
Chrome 17.0.963.56: incorrect: there is a rendered right margin of 200px.
Safari 5.1.2: incorrect: there is a rendered right margin of 200px.
Konqueror 4.8.0: incorrect: there is a rendered right margin of 200px.

Test 5 (2 floats)

This yellow square is floated left and it has no margin.

This yellow square is a floated right and it has no margin.

This orange rectangle:
– establishes a new block formating context thanks to the CSS declaration overflow: hidden;
– has a 200px right margin;

This orange rectangle:
– establishes a new block formating context thanks to the CSS declaration overflow: hidden;
– has a 200px right margin;

Results of test 5:

Internet Explorer 8: correct: the right margin is rendered under the right float; the orange rectangle has no rendered gap on its right.
Internet Explorer 9: [TBD]
Firefox 10.0.2: correct: the right margin is rendered under the right float; the orange rectangle has no rendered gap on its right.
Opera 11.61: correct: the right margin is rendered under the right float; the orange rectangle has no rendered gap on its right.
Chrome 17.0.963.56: incorrect: there is a rendered right margin of 200px.
Safari 5.1.2: incorrect: there is a rendered right margin of 200px.
Konqueror 4.8.0: incorrect: there is a rendered right margin of 200px.

Test 6 (2 floats)

This yellow square is floated left and it has a right margin of 100px.

This yellow square is floated right and it has a left margin of 100px.

This orange rectangle:
– establishes a new block formating context thanks to the CSS declaration overflow: hidden;
– has a 0px left margin and a 0px right margin;

This orange rectangle:
– establishes a new block formating context thanks to the CSS declaration overflow: hidden;
– has a 0px left margin and a 0px right margin;

Results of test 6:

Internet Explorer 8: correct: the orange rectangle has a rendered 100px gap on its left and a rendered 100px gap on its right.
Internet Explorer 9: [TBD]
Firefox 10.0.2: correct: the orange rectangle has a rendered 100px gap on its left and a rendered 100px gap on its right.
Opera 11.61: correct: the orange rectangle has a rendered 100px gap on its left and a rendered 100px gap on its right.
Chrome 17.0.963.56: correct: the orange rectangle has a rendered 100px gap on its left and a rendered 100px gap on its right.
Safari 5.1.2: correct: the orange rectangle has a rendered 100px gap on its left and a rendered 100px gap on its right.
Konqueror 4.8.0: correct: the orange rectangle has a rendered 100px gap on its left and a rendered 100px gap on its right.