Relationships between display, position, and float

Rule 1

CSS2 says:

If 'display' has the value 'none', user agents must ignore 'position' and 'float'. In this case, the element generates no box.

This rule is tested in my test of display: none.

Rule 2

CSS2 says:

Otherwise, 'position' has the value 'absolute' or 'fixed', 'display' is set to 'block' and 'float' is set to 'none'. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.

This text should run all the way across the purple-bordered containing div, underneath the three absolutely positioned boxes (one at the left, one centered, and one at the right). First absolutely positioned span. Second absolutely positioned span. Third absolutely positioned span.

Rule 3

CSS2 says:

Otherwise, if 'float' has a value other than 'none', 'display' is set to 'block' and the box is floated.

This inline element should be floating left and have a block-element type border around it. This means the border should be a single box. This inline element should be floating right and have a block-element type border around it. This means the border should be a single box. This should have a green border as an inline element border, which surrounds each line of the element (and is open on the ends where the line is broken. It should flow around the float.

Rule 4

CSS2 says:

Otherwise, the remaining 'display' properties apply as specified.

See all my other tests for various display properties.

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org