Block elements with a width and floats

Under reveiw and testing, 17th December 2010

The test test various CSS properties and their interaction around floats. The boxes with a blue background are those properties and values that establish a new block formating context. IE7- fails the first series of test (with display) due to the escaping block bug (see example 2a and 3a on that page) except those with table properties which is unsupported. IE7- fails the second series of test (with overflow) due to the hasLayout bug.

The basic set up for the test are below. There is one float (transparent green background) that is half the width of it's containing block followed by a second float (transparent yellow background) that is the full width of it's containing block. The containing block has a 25px by 25px grid background. The containing block's width is formed by the width of the wrapper which has a blue border.

Note: No implementation can be really be said to have passed or failed any of these test but rather it's how I understand the specs (making notes). The tested elements have two colors. The boxes with a blue background are those properties and values that establish a new block formating context. IE7- fails all test due to the hasLayout bug.

Display Properties

display:block x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Passed: Opera 9.10~11, Gecko 1.7~1.9, Safari 3~5 & IE 8~9

display:list-item x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Passed: Opera 9.10~11, Gecko 1.7~1.9, Safari 3~5 & IE 8~9

Note: Safari 5 places list-marker box in wrong position

display:table x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Passed: Opera 9.10~9.5, Gecko 1.7~1.9 & Safari 3

Failed: IE8b1

Not supported: Gecko 1.7~1.8, IE 5.5, IE 6, IE 7

display:table-cell x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Passed: Opera 9.10~9.5 & Gecko 1.7~1.9

Failed: IE8b1 & Safari 3

Not supported: Gecko 1.7~1.8, IE 5.5, IE 6, IE 7

display:table-row x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Passed: Opera 9.10~9.5 & Gecko 1.7~1.9

Failed: Safari 3

Unknown: IE8b1

Not supported: Gecko 1.7~1.8, IE 5.5, IE 6, IE 7

Overflow Properties

overflow:auto x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Passed: Opera 9.10~9.5 & Gecko 1.9 (Firefox/2.0.0.14

Passed: Gecko 1.7~1.8 & Safari 3 (stacking over float)

Failed: IE8b1

Failed: IE 5.5, IE 6 & IE 7 (due to IE/Win escaping float bug)

overflow:hidden x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Passed: Opera 9.10~9.5 & Gecko 1.9

Passed: Gecko 1.7~1.8 & Safari 3 (stacking over float)

Failed: IE8b1

Failed: IE 5.5, IE 6 & IE 7 (due to IE/Win escaping float bug)

  1. Inline elements with a width and floats
  2. Inline elements and floats
  3. Block elements with a width and floats (Viewing)
  4. Block elements and floats

CSS Class test