1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: Vertical Position of Floats</title>
5 <meta name="flags" content="image">
6 <link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements">
7 <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html">
8 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
9 <style type="text/css">
10 p { color: navy; }
11 div { border: 5px solid purple; padding: 1em; margin: 1em; color: silver; font: 1em/1.3 serif; }
12 div img { width: 7em; color: red; }
13 div span.a { border: solid aqua; background-color: teal; color: white; }
14 div img.a { float: left; }
15 div span.b { border: solid fuchsia; background-color: purple; color: white; }
16 div img.b { float: right; }
17 </style>
18 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
19 </head>
20 <body>
21 <p>The big coloured boxes should be level with the top of the small
22 coloured boxes of the same color (unless there is not enough room
23 for the big box to fit on the small box's line, in which case the
24 big box should be level with the bottom of the respective small
25 box).</p>
26 <div>
27 dummy text dummy text dummy text dummy text dummy text dummy text
28 <span class="a">⇦</span>
29 <img src="support/square-teal.png" alt="FAIL: Images required for this test." class="a">
30 dummy text dummy text dummy text dummy text dummy text dummy text
31 <span class="b">⇨</span>
32 <img src="support/square-purple.png" alt="FAIL: Images required for this test." class="b">
33 dummy text dummy text dummy text dummy text dummy text dummy text
34 dummy text dummy text dummy text dummy text dummy text dummy text
35 dummy text dummy text dummy text dummy text dummy text dummy text
36 dummy text dummy text dummy text dummy text dummy text dummy text
37 dummy text dummy text dummy text dummy text dummy text dummy text
38 dummy text dummy text dummy text dummy text dummy text dummy text
39 dummy text dummy text dummy text dummy text dummy text dummy text
40 dummy text dummy text dummy text dummy text dummy text dummy text
41 dummy text dummy text dummy text dummy text dummy text dummy text
42 dummy text dummy text dummy text dummy text dummy text dummy text
43 dummy text dummy text dummy text dummy text dummy text dummy text
44 dummy text dummy text dummy text dummy text dummy text dummy text
45 dummy text dummy text dummy text dummy text dummy text dummy text
46 dummy text dummy text dummy text dummy text dummy text dummy text
47 dummy text dummy text dummy text dummy text dummy text dummy text
48 dummy text dummy text dummy text dummy text dummy text dummy text
49 dummy text dummy text dummy text dummy text dummy text dummy text
50 dummy text dummy text dummy text dummy text dummy text dummy text
51 dummy text dummy text dummy text dummy text dummy text dummy text
52 </div>
53 </body>
54 </html>