CSS1 Test Suite: 4.1.4 Floating Elements

[Previous] [Next] [Section] [Contents] [Specification]

The style declarations which apply to the text below are:

HR.minor {clear: both; width: 5%;}
HR.major {clear: both; width: 75%; margin: 1.5em;}
DIV {border: 5px solid purple; padding: 0; margin: 0.125em;}
P.left, P.right {width: 10em; padding: 1em; margin: 0;
   border: 1px solid lime; background-color: silver;}
IMG.left, IMG.right {margin: 0; border: 3px solid black;}
.left {float: left;}
.right {float: right;}

On this test page, each test is performed once with floating paragraphs, and then again with floating images. Other than the substitution of images for pargraphs, the structure of the test is exactly the same, including the direction of the floats.

This is a left-floating paragraph (first in source).

This is a right-floating paragraph (second in source).

This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV.
This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV.

This is the first left-floating paragraph.

This is the second left-floating paragraph.

This is the third left-floating paragraph.

This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other. The first two should be side by side, whereas the third should be on the next "line."
This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other. The first two should be side by side, whereas the third should be on the next "line."

This is a left-floating paragraph (first in source).

This is a right-floating paragraph (second in source).

This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other in any way, nor should the floated elements be overwritten by the DIV text. In addition, the floated elements should not be side-by-side, but instead the first should be floated left, and the second floated to the right below the first.
This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other in any way, nor should the floated elements be overwritten by the DIV text. In addition, the floated images should not be side-by-side, but instead the first should be floated left, and the second floated to the right below the first.

This is a right-floating paragraph (first in source).

This is a left-floating paragraph (second in source).

This is text within the DIV. The floating elements within this DIV should not go beyond the top side of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, the top of the left-floating box should not be higher than the top of the right-floating box.
This is text within the DIV. The floating images within this DIV should not go beyond the top side of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, the top of the left-floating image should not be higher than the top of the right-floating image.
This is text within the DIV. *

This is a left-floating paragraph (first in source).

The floating elements within this DIV should not go any higher than the line-box containing the inline content which precedes them. *

This is a right-floating paragraph (second in source).

This means that the top side of each float can be, at most, as high as the top edge of the inline element containing the content just before the floating elements occur in the source. In order to mark these points clearly, an asterisk has been inserted just before each floated element.
This is text within the DIV. * The floating images within this DIV should not go any higher than the line-box containing the inline content which precedes them. * This means that the top side of each float can be, at most, as high as the top edge of the inline element containing the content just before the floating images occur in the source. In order to mark these points clearly, an asterisk has been inserted just before each floated image.
This is text within the DIV. *

This is a left-floating paragraph (first in source).

The floating elements within this DIV should not go any higher than the line-box containing the inline content which precedes them. *

This is a right-floating paragraph (second in source).

This means that the top side of each float can be,*

This is a left-floating paragraph (third in source).

at most, as high as the top edge of the inline element containing the content just before the floating elements occur in the source. *

This is a left-floating paragraph (fourth in source).

In order to mark these points clearly, an asterisk has been inserted just before each floated element. If a line has room for a floated element, then the element should float so that its top is aligned with the top of the line-box in which the asterisk appears. Otherwise, its top should align with the top of the next line-box.
This is text within the DIV. * The floating images within this DIV should not go any higher than the line-box containing the inline content which precedes them. * This means that the top side of each float can be, * at most, as high as the top edge of the inline element containing the content just before the floating images occur in the source. * In order to mark these points clearly, an asterisk has been inserted just before each floated image. If a line has room for a floated image, then the image should float so that its top is aligned with the top of the line-box in which the asterisk appears. Otherwise, its top should align with the top of the next line-box.
This is *

This is a left-floating paragraph (first in source).

*

This is a right-floating paragraph (second in source).

text within the DIV. Under CSS1, the left floating element should be placed in the upper left corner of the DIV, and the purple border of the DIV should abut the green border of the floating element. Similarly, the right floating element should be placed in the upper right corner of the DIV, and the purple border of the DIV should abut the green border of the floating element. The text of the DIV element should flow between and under the two floating elements. The two asterisk characters mark the insertion points of the floating elements. It is expected that, under future specifications, it may be acceptable for the top of floated elements to align with the top of the line-box following the insertion point of the floated element to avoid floating elements appearing before text which precedes it in the source document.
This is * * text within the DIV. Under CSS1, the left floating image should be placed in the upper left corner of the DIV, and the purple border of the DIV should abut the green border of the floating image. Similarly, the right floating image should be placed in the upper right corner of the DIV, and the purple border of the DIV should abut the green border of the floating image. The text of the DIV element should flow between and under the two floating image. The two asterisk characters mark the insertion points of the floating image. It is expected that, under future specifications, it may be acceptable for the top of floated elements to align with the top of the line-box following the insertion point of the floated element to avoid floating elements appearing before text which precedes it in the source document.
TABLE Testing Section
 

On this test page, each test is performed once with floating paragraphs, and then again with floating images. Other than the substitution of images for pargraphs, the structure of the test is exactly the same, including the direction of the floats.

This is a left-floating paragraph (first in source).

This is a right-floating paragraph (second in source).

This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV.
This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV.

This is the first left-floating paragraph.

This is the second left-floating paragraph.

This is the third left-floating paragraph.

This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other. The first two should be side by side, whereas the third should be on the next "line."
This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other. The first two should be side by side, whereas the third should be on the next "line."

This is a left-floating paragraph (first in source).

This is a right-floating paragraph (second in source).

This is text within the DIV. The floating elements within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other in any way, nor should the floated elements be overwritten by the DIV text. In addition, the floated elements should not be side-by-side, but instead the first should be floated left, and the second floated to the right below the first.
This is text within the DIV. The floating images within this DIV should not go beyond the left or right inner edge of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, they should not overlap each other in any way, nor should the floated elements be overwritten by the DIV text. In addition, the floated images should not be side-by-side, but instead the first should be floated left, and the second floated to the right below the first.

This is a right-floating paragraph (first in source).

This is a left-floating paragraph (second in source).

This is text within the DIV. The floating elements within this DIV should not go beyond the top side of this DIV, which means that the borders of the floating elements should not overlap the top or side borders of the DIV in any way. In addition, the top of the left-floating box should not be higher than the top of the right-floating box.
This is text within the DIV. The floating images within this DIV should not go beyond the top side of this DIV, which means that the borders of the floating images should not overlap the top or side borders of the DIV in any way. In addition, the top of the left-floating image should not be higher than the top of the right-floating image.
This is text within the DIV. *

This is a left-floating paragraph (first in source).

The floating elements within this DIV should not go any higher than the line-box containing the inline content which precedes them. *

This is a right-floating paragraph (second in source).

This means that the top side of each float can be, at most, as high as the top edge of the inline element containing the content just before the floating elements occur in the source. In order to mark these points clearly, an asterisk has been inserted just before each floated element.
This is text within the DIV. * The floating images within this DIV should not go any higher than the line-box containing the inline content which precedes them. * This means that the top side of each float can be, at most, as high as the top edge of the inline element containing the content just before the floating images occur in the source. In order to mark these points clearly, an asterisk has been inserted just before each floated image.
This is text within the DIV. *

This is a left-floating paragraph (first in source).

The floating elements within this DIV should not go any higher than the line-box containing the inline content which precedes them. *

This is a right-floating paragraph (second in source).

This means that the top side of each float can be,*

This is a left-floating paragraph (third in source).

at most, as high as the top edge of the inline element containing the content just before the floating elements occur in the source. *

This is a left-floating paragraph (fourth in source).

In order to mark these points clearly, an asterisk has been inserted just before each floated element. If a line has room for a floated element, then the element should float so that its top is aligned with the top of the line-box in which the asterisk appears. Otherwise, its top should align with the top of the next line-box.
This is text within the DIV. * The floating images within this DIV should not go any higher than the line-box containing the inline content which precedes them. * This means that the top side of each float can be, * at most, as high as the top edge of the inline element containing the content just before the floating images occur in the source. * In order to mark these points clearly, an asterisk has been inserted just before each floated image. If a line has room for a floated image, then the image should float so that its top is aligned with the top of the line-box in which the asterisk appears. Otherwise, its top should align with the top of the next line-box.
This is *

This is a left-floating paragraph (first in source).

*

This is a right-floating paragraph (second in source).

text within the DIV. Under CSS1, the left floating element should be placed in the upper left corner of the DIV, and the purple border of the DIV should abut the green border of the floating element. Similarly, the right floating element should be placed in the upper right corner of the DIV, and the purple border of the DIV should abut the green border of the floating element. The text of the DIV element should flow between and under the two floating elements. The two asterisk characters mark the insertion points of the floating elements. It is expected that, under future specifications, it may be acceptable for the top of floated elements to align with the top of the line-box following the insertion point of the floated element to avoid floating elements appearing before text which precedes it in the source document.
This is * * text within the DIV. Under CSS1, the left floating image should be placed in the upper left corner of the DIV, and the purple border of the DIV should abut the green border of the floating image. Similarly, the right floating image should be placed in the upper right corner of the DIV, and the purple border of the DIV should abut the green border of the floating image. The text of the DIV element should flow between and under the two floating image. The two asterisk characters mark the insertion points of the floating image. It is expected that, under future specifications, it may be acceptable for the top of floated elements to align with the top of the line-box following the insertion point of the floated element to avoid floating elements appearing before text which precedes it in the source document.
[Previous] [Next] [Section] [Contents] [Specification]