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: all; 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 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.

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.

Because this paragraph cannot float right within the DIV without overlapping with the right-floating box above it, it must be placed below the right-floating box, floated to the right. This is the second right-floating paragraph.

This floating paragraph cannot have its top any higher than the top of either right-floating paragraph, and therefore its top should be exactly even with the top of the second 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.