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.
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 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.
