css1/formatting_model/floating_elements.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><html><head><title>CSS1 Test Suite: 4.1.4 Floating Elements</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<link rel="stylesheet" type="text/css" media="screen" href="../resources/base.css">
<style type="text/css">
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;}
</style></head>

<body><p>The style declarations which apply to the text below are:</p>
<pre>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;}

</pre>
<hr>
<p> 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. </p>


<hr class="major">

<div>
<p class="left">This is a left-floating paragraph (first in source).</p>
<p class="right">This is a right-floating paragraph (second in source).</p>
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. </div>
<hr class="minor">
<div>
<img src="../resources/vblank.gif" class="left">
<img src="../resources/vblank.gif" class="right"> 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. </div>

<hr class="major">

<div style="width: 27em;">
<p class="left">This is the first left-floating paragraph.</p>
<p class="left">This is the second left-floating paragraph.</p>
<p class="left">This is the third left-floating paragraph.</p> 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." </div>
<hr class="minor">
<div style="width: 350px;">
<img src="../resources/hblank1.gif" class="left" width="150" height="30">
<img src="../resources/hblank2.gif" class="left" width="150" height="30">
<img src="../resources/hblank2.gif" class="left" width="150" height="30">
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." </div>

<hr class="major">

<div style="width: 19em;">
<p class="left">This is a left-floating paragraph (first in source).</p>
<p class="right">This is a right-floating paragraph (second in source).</p>
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. </div>
<hr class="minor">
<div style="width: 400px;">
<img src="../resources/hblank1.gif" class="left" width="250">
<img src="../resources/hblank2.gif" class="right" width="250"> 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. </div>

<hr class="major">

<div>
<p class="right">This is a right-floating paragraph (first in source).</p>
<p class="left">This is a left-floating paragraph (second in source).</p>
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. </div>
<hr class="minor">
<div>
<img src="../resources/vblank.gif" class="left">
<img src="../resources/vblank.gif" class="right"> 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. </div>

<hr class="major">

<div>
This is text within the DIV.  *<p class="left">This is a left-floating paragraph (first in source).</p>
The floating elements within this DIV should not go any higher than the
line-box containing the inline content which precedes them.  * <p class="right">This is a right-floating paragraph (second in source).</p>
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. </div>
<hr class="minor">
<div>
This is text within the DIV.  *<img src="../resources/vblank.gif" class="left">
The floating images within this DIV should not go any higher than the
line-box containing the inline content which precedes them.  * <img src="../resources/vblank.gif" class="right"> 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. </div>

<hr class="major">

<div>
This is text within the DIV.  *<p class="left">This is a left-floating paragraph (first in source).</p>
The floating elements within this DIV should not go any higher than the
line-box containing the inline content which precedes them.  * <p class="right">This is a right-floating paragraph (second in source).</p>
This means that the top side of each float can be,*<p class="left">This is a left-floating paragraph (third in source).</p>
at most, as high as the top edge of the inline element containing the
content just before the floating elements occur in the source.  *<p class="left">This is a left-floating paragraph (fourth in source).</p>
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. </div>
<hr class="minor">
<div>
This is text within the DIV.  *<img src="../resources/vblank.gif" class="left">
The floating images within this DIV should not go any higher than the
line-box containing the inline content which precedes them.  * <img src="../resources/vblank.gif" class="right">
This means that the top side of each float can be,  *<img src="../resources/vblank.gif" class="left">
at most, as high as the top edge of the inline element containing the
content just before the floating images occur in the source.  *<img src="../resources/vblank.gif" class="left">
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. </div>

<hr class="major">

<div style="width: 30em;">
This is *<p class="left">This is a left-floating paragraph (first in source).</p> *<p class="right">This is a right-floating paragraph (second in source).</p>
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. </div>
<hr class="minor">
<div style="width: 30em;">
This is *<img src="../resources/vblank.gif" class="left"> *<img src="../resources/vblank.gif" class="right">
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. </div>

<hr class="major">


<table border="1" cellspacing="0" cellpadding="3" class="tabletest">
<tbody><tr>
<td colspan="2" bgcolor="silver"><strong>TABLE Testing Section</strong></td>
</tr>
<tr>
<td bgcolor="silver"> </td>
<td><p> 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. </p>


<hr class="major">

<div>
<p class="left">This is a left-floating paragraph (first in source).</p>
<p class="right">This is a right-floating paragraph (second in source).</p>
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. </div>
<hr class="minor">
<div>
<img src="../resources/vblank.gif" class="left">
<img src="../resources/vblank.gif" class="right"> 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. </div>

<hr class="major">

<div style="width: 27em;">
<p class="left">This is the first left-floating paragraph.</p>
<p class="left">This is the second left-floating paragraph.</p>
<p class="left">This is the third left-floating paragraph.</p> 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." </div>
<hr class="minor">
<div style="width: 350px;">
<img src="../resources/hblank1.gif" class="left" width="150" height="30">
<img src="../resources/hblank2.gif" class="left" width="150" height="30">
<img src="../resources/hblank2.gif" class="left" width="150" height="30">
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." </div>

<hr class="major">

<div style="width: 19em;">
<p class="left">This is a left-floating paragraph (first in source).</p>
<p class="right">This is a right-floating paragraph (second in source).</p>
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. </div>
<hr class="minor">
<div style="width: 400px;">
<img src="../resources/hblank1.gif" class="left" width="250">
<img src="../resources/hblank2.gif" class="right" width="250"> 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. </div>

<hr class="major">

<div>
<p class="right">This is a right-floating paragraph (first in source).</p>
<p class="left">This is a left-floating paragraph (second in source).</p>
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. </div>
<hr class="minor">
<div>
<img src="../resources/vblank.gif" class="left">
<img src="../resources/vblank.gif" class="right"> 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. </div>

<hr class="major">

<div>
This is text within the DIV.  *<p class="left">This is a left-floating paragraph (first in source).</p>
The floating elements within this DIV should not go any higher than the
line-box containing the inline content which precedes them.  * <p class="right">This is a right-floating paragraph (second in source).</p>
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. </div>
<hr class="minor">
<div>
This is text within the DIV.  *<img src="../resources/vblank.gif" class="left">
The floating images within this DIV should not go any higher than the
line-box containing the inline content which precedes them.  * <img src="../resources/vblank.gif" class="right"> 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. </div>

<hr class="major">

<div>
This is text within the DIV.  *<p class="left">This is a left-floating paragraph (first in source).</p>
The floating elements within this DIV should not go any higher than the
line-box containing the inline content which precedes them.  * <p class="right">This is a right-floating paragraph (second in source).</p>
This means that the top side of each float can be,*<p class="left">This is a left-floating paragraph (third in source).</p>
at most, as high as the top edge of the inline element containing the
content just before the floating elements occur in the source.  *<p class="left">This is a left-floating paragraph (fourth in source).</p>
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. </div>
<hr class="minor">
<div>
This is text within the DIV.  *<img src="../resources/vblank.gif" class="left">
The floating images within this DIV should not go any higher than the
line-box containing the inline content which precedes them.  * <img src="../resources/vblank.gif" class="right">
This means that the top side of each float can be,  *<img src="../resources/vblank.gif" class="left">
at most, as high as the top edge of the inline element containing the
content just before the floating images occur in the source.  *<img src="../resources/vblank.gif" class="left">
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. </div>

<hr class="major">

<div style="width: 30em;">
This is *<p class="left">This is a left-floating paragraph (first in source).</p> *<p class="right">This is a right-floating paragraph (second in source).</p>
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. </div>
<hr class="minor">
<div style="width: 30em;">
This is *<img src="../resources/vblank.gif" class="left"> *<img src="../resources/vblank.gif" class="right">
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. </div>

<hr class="major">
</td></tr></tbody></table></body></html>