blob: c7d5edcb566ecdbd2b87e359805062865ff2f724 [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS 2.1 Test Suite: Floating Elements</title>
<style type="text/css">
p { color: navy; }
div { border: 5px solid purple; padding: 1em; margin: 1em; color: silver; font: 1em/1.3 serif; }
div p { width: 7em; padding: 1em; margin: 0; }
div .a { border: solid aqua; background-color: teal; color: white; }
div p.a { float: left; }
div .b { border: solid fuchsia; background-color: purple; color: white; }
div p.b { float: right; }
div .c { border: solid yellow; background-color: orange; color: white; }
div p.c { float: left; }
div .d { border: solid lime; background-color: green; color: white; }
div p.d { float: left; }
</style>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
</head>
<body>
<p>The big coloured boxes should be level with the top of the small
coloured boxes of the same color (unless there is not enough room
for the big box to fit on the small box's line after the small box,
in which case the big box should be as high as possible below the
small box).</p>
<div>
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text
<span class="a">A</span>
<p class="a">AAAA</p>
dummy text dummy text dummy text dummy text dummy text dummy text
<span class="b">B</span>
<p class="b">BBBB</p>
dummy text dummy text dummy text
<span class="c">C</span>
<p class="c">CCCC</p>
dummy text dummy text dummy text dummy text dummy text dummy text
<span class="d">D</span>
<p class="d">DDDD</p>
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
</div>
</body>
</html>