<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS 2.1 Test Suite: Floating Elements</title> <style type="text/css"><![CDATA[ p { color: navy; } div { border: 5px solid purple; padding: 1em; margin: 1em; color: silver; font: 1em/1.3 serif; } div img { width: 7em; color: red; } div span.a { border: solid aqua; background-color: teal; color: white; } div img.a { float: left; } div span.b { border: solid fuchsia; background-color: purple; color: white; } div img.b { float: right; } ]]></style> <link title="9.5.1 Positioning the float: the 'float' property" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" rel="help"/> </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, in which case the big box should be level with the bottom of the respective small box).</p> <div> dummy text dummy text dummy text dummy text dummy text dummy text <span class="a">⇦</span> <img alt="FAIL: Images required for this test." src="support/square-teal.png" class="a"/> dummy text dummy text dummy text dummy text dummy text dummy text <span class="b">⇨</span> <img alt="FAIL: Images required for this test." src="support/square-purple.png" class="b"/> 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>