The style declarations which apply to the text below are:
/*
P.fl, P.fls, P.fr, P.frs {
border-style: solid; border-color: green; border-width: 10px;
margin: 10px; padding: 10px;}
*/
P.fl, P.fls, P.fr, P.frs {
border-style: solid; border-color: green; border-width: 10px;
padding: 10px;}
P.fl, P.fls { margin: 0px 10px 10px 0px ; }
P.fr, P.frs { margin: 0px 0px 10px 10px ; }
P.fl, P.fr {width: 50%;}
P.fls, P.frs {width: 25%;}
P.fl, P.fls {float: left;}
P.fr, P.frs {float: right;}
DIV {clear: both; margin: 10px; padding: 10px;
border-style: solid; border-color: red; border-width: 10px;}
DIV.ch {height: 400px;}
TABLE, HR {clear: both;}
The text in this paragraph should be floating on the right side, and the top border of this float should be aligned with the top of the text within the DIV. There should be 10 pixels of padding both between this text and the green border and between the two borders.
theThe text in this paragraph should be floating on the left side, and the top border of this float should be aligned with the top of the text within the DIV. There should be 10 pixels of padding both between this text and the green border and between the two borders.
text in the DIV. The DIV is set to have a constant height so that the paragraphs should fit.The text in this paragraph should be floating on the right side, and the top border of this float should be aligned with the top of the text within the DIV. There should be 10 pixels of padding both between this text and the green border and between the two borders.
The text in this paragraph should be floating on the left side, and the top border of this float should be aligned with the top of the text within the DIV. There should be 10 pixels of padding both between this text and the green border and between the two borders.
This is the text in the DIV. The DIV is set to have a constant height so that the paragraphs should fit.The text in this paragraph should be floating on the left side. There should be 10 pixels of padding both between this text and the green border and between the green and the red borders.
The text in this paragraph should be floating to the right of the first left-floating paragraph.
Because this paragraph cannot also float left (and be to the right of the previous two paragraphs), it must be placed below them, so that its left edge is directly below the left edge of the first floating paragraph.
This is the text in the DIV. It should begin at the top, to the right of the two floating boxes that are also at the top. The DIV is set to have a constant height so that the paragraphs should fit. The margins on the paragraphs in this DIV were set to zero in a STYLE element to test the interpretation of width.The text in this paragraph should be floating on the left side. There should be 10 pixels of padding between this text and the green border, between the green and the red borders, and between the green borders.
The text in this paragraph should be floating to the right of the first left-floating paragraph.
Because this paragraph cannot also float left (and be to the right of the previous two paragraphs), it must be placed below them, so that its left edge is directly below the left edge of the first floating paragraph.
This is the text in the DIV. It should begin at the top, to the right of the two floating boxes that are also at the top. The DIV is set to have a constant height so that the paragraphs should fit.The text in this paragraph should be floating on the left side. There should be 10 pixels of padding both between this text and the green border and between the two borders.
Because this paragraph cannot float right within the DIV without overlapping with the left-floating box, it must be placed below the left-floating box, floated to the right.
This floating paragraph cannot have its top any higher than the top of the right-floating paragraph, and therefore its top should be exactly even with the top of the right floating paragraph.
This is the text in the DIV. The DIV is set to have a constant height so that the paragraphs should fit.This is short.
This paragraph is floated left, and since it must be placed as high as possible without its top being higher than the top of any preceding line-boxes, the paragraph that says "This is short" should appear directly to the right of the top border of this paragraph.
This paragraph, which has <STYLE="margin-top: -30px">, should protrude 10 pixels out the top of the small red DIV.
This paragraph should protrude out of the bottom of the DIV since it is larger than the DIV.
This is some text outside the paragraph and inside the DIV.This paragraph should stick out of the DIV on the right edge, since its width is 600px, while the DIV is only 400px wide.
This is
The text in this paragraph should be floating on the right side, and the top border of this float should be aligned with the top of the text within the DIV. There should be 10 pixels of padding both between this text and the green border and between the two borders. theThe text in this paragraph should be floating on the left side, and the top border of this float should be aligned with the top of the text within the DIV. There should be 10 pixels of padding both between this text and the green border and between the two borders. text in the DIV. The DIV is set to have a constant height so that the paragraphs should fit.The text in this paragraph should be floating on the right side, and the top border of this float should be aligned with the top of the text within the DIV. There should be 10 pixels of padding both between this text and the green border and between the two borders. The text in this paragraph should be floating on the left side, and the top border of this float should be aligned with the top of the text within the DIV. There should be 10 pixels of padding both between this text and the green border and between the two borders. This is the text in the DIV. The DIV is set to have a constant height so that the paragraphs should fit.The text in this paragraph should be floating on the left side. There should be 10 pixels of padding both between this text and the green border and between the green and the red borders. The text in this paragraph should be floating to the right of the first left-floating paragraph. Because this paragraph cannot also float left (and be to the right of the previous two paragraphs), it must be placed below them, so that its left edge is directly below the left edge of the first floating paragraph. This is the text in the DIV. It should begin at the top, to the right of the two floating boxes that are also at the top. The DIV is set to have a constant height so that the paragraphs should fit. The margins on the paragraphs in this DIV were set to zero in a STYLE element to test the interpretation of width.The text in this paragraph should be floating on the left side. There should be 10 pixels of padding between this text and the green border, between the green and the red borders, and between the green borders. The text in this paragraph should be floating to the right of the first left-floating paragraph. Because this paragraph cannot also float left (and be to the right of the previous two paragraphs), it must be placed below them, so that its left edge is directly below the left edge of the first floating paragraph. This is the text in the DIV. It should begin at the top, to the right of the two floating boxes that are also at the top. The DIV is set to have a constant height so that the paragraphs should fit.The text in this paragraph should be floating on the left side. There should be 10 pixels of padding both between this text and the green border and between the two borders. Because this paragraph cannot float right within the DIV without overlapping with the left-floating box, it must be placed below the left-floating box, floated to the right. This floating paragraph cannot have its top any higher than the top of the right-floating paragraph, and therefore its top should be exactly even with the top of the right floating paragraph. This is the text in the DIV. The DIV is set to have a constant height so that the paragraphs should fit.This is short. This paragraph is floated left, and since it must be placed as high as possible without its top being higher than the top of any preceding line-boxes, the paragraph that says "This is short" should appear directly to the right of the top border of this paragraph. This paragraph, which has This paragraph should protrude out of the bottom of the DIV since it is larger than the DIV. This is some text outside the paragraph and inside the DIV.This paragraph should stick out of the DIV on the right edge, since its width is 600px, while the DIV is only 400px wide. |
(Back to CSS Testing Information, David Baron)