c414-flt-ln-001.xht (3122B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 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"><![CDATA[ 10 p { color: navy; } 11 div { border: 5px solid purple; padding: 1em; margin: 1em; color: silver; font: 1em 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>