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

inline-level or block-level content
Clearing element

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~10.60, IE 8~9 & FF 3.5

Passed: Gecko 1.7~1.9 & Safari 3-5 (showing overlap of float by second line of line boxes)

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~10.60, IE 8~9 & FF 3.5

Passed: Gecko 1.7~1.9 & Safari 3-5 (showing overlap of float by second line of line boxes)

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~10.60, Gecko 1.7~1.9 & Safari 3~5

Failed: IE8 (no overlap even though box has be shorten and positioned incorrectly below the last float on the right)

Failed: IE9 beta (no overlap even though box has be shorten, positioned incorrectly layered under the last float on the left and the box drops and jumps when text in selected)

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~10.60, Gecko 1.7~1.9 & Safari 5

Failed: Safari 3 (reason ?)

Failed: IE8 (no overlap even though box has be shorten and positioned incorrectly below the last float on the right)

Failed: IE9 beta (no overlap even though box has be shorten, positioned incorrectly layered under the last float on the left and the box drops and jumps when text in selected)

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~10.60, Gecko 1.7~1.9 & Safari 5

Failed: Safari 3

Failed: IE8 (no overlap even though box has be shorten and positioned incorrectly below the last float on the right)

Failed: IE9 beta (no overlap even though box has be shorten, positioned incorrectly layered under the last float on the left and the box drops and jumps when text in selected)

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~10.60, Gecko 1.9 & Safari 5

Passed: Gecko 1.7~1.8 & Safari 3 (box is overlapping float)

Failed: IE8 (no overlap even though box has be shorten and positioned incorrectly below the last float on the right)

Failed: IE9 beta (no overlap even though box has be shorten, positioned incorrectly below the last float on the left and the box drops and jumps when text in selected)

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~10.60, Gecko 1.9 & Safari 5

Passed: Gecko 1.7~1.8 & Safari 3 (box is overlapping float)

Failed: IE8 (no overlap even though box has be shorten and positioned incorrectly below the last float on the right)

Failed: IE9 beta (no overlap even though box has be shorten, positioned incorrectly below the last float on the left and the box drops and jumps when text in selected)

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

CSS Class test