394 lines
21 KiB
HTML
394 lines
21 KiB
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"><EFBFBD></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> |