CSS2 Test Suite: 10.3.5 Computing widths and margins: floating, non-replaced elements

[index page] [section] [Previous] [Next] [Specification]

The style declarations contained within this page:

div {float: right; background: #FDA;}
hr {clear: right;}
.cl1 {width: auto; margin-right: auto; margin-left: auto;}
.cl2 {width: auto; margin-right: 20px; margin-left: 20px;}
.cl3 {width: 25%; margin-right: auto; margin-left: auto;}
.cl4 {width: 100%; margin-right: auto; margin-left: auto;}


Note that the horizontal rules are used to keep tests separate, and to "reset" the float environment by providing a handy element to 'clear'.


[cl1] A floated element.
With two lines.
Okay, three.

The floated 'div' to the right of this text should be as skinny as possible, as its computed 'width' should be '0', and have no right or left margins. This will cause its right edge to abut the right edge of the content area of its parent element, and no extra space between the text in this paragraph and the left edge of the floated element (note that line-breaking in this paragraph may create the appearance of space).


[cl2] A floated element.
With two lines.
Okay, three.

The floated 'div' to the right of this text should be as skinny as possible, as its computed 'width' should be '0', and have 20-pixel right and left margins. This will cause its right edge to be placed 20 pixels to the left of the right edge of the content area of its parent element, and have 20 pixels of extra space between the text in this paragraph and the left edge of the floated element (note that line-breaking in this paragraph may create the appearance of additional space).


[cl3] A floated element.
With two lines.
Okay, three.

The floated 'div' to the right of this text should be one-quarter the width of its parent element, and have no right or left margins. This will cause its right edge to abut the right edge of the content area of its parent element, and no extra space between the text in this paragraph and the left edge of the floated element (note that line-breaking in this paragraph may create the appearance of space).


[cl4] A floated element.
With two lines.
Okay, three.

The floated 'div' should not be to the right of this text but instead be the width of its parent element's content area. This paragraph should appear below the float instead of to its left.


[index page] [section] [Previous] [Next] [Specification]