1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
4 <title>CSS 2.1 Test Suite: Floating Elements</title>
5 <style type="text/css">
7 div { border: 5px solid purple; padding: 1em; margin: 1em; color: silver; font: 1em/1.3 serif; }
8 div p { width: 7em; padding: 1em; margin: 0; }
9 div .a { border: solid aqua; background-color: teal; color: white; }
10 div p.a { float: left; }
11 div .b { border: solid fuchsia; background-color: purple; color: white; }
12 div p.b { float: right; }
13 div .c { border: solid yellow; background-color: orange; color: white; }
14 div p.c { float: left; }
15 div .d { border: solid lime; background-color: green; color: white; }
16 div p.d { float: left; }
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">
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 after the small box,
24 in which case the big box should be as high as possible below the
27 dummy text dummy text dummy text dummy text dummy text dummy text
29 <span class="a">A</span>
31 dummy text dummy text dummy text dummy text dummy text dummy text
32 <span class="b">B</span>
34 dummy text dummy text dummy text
35 <span class="c">C</span>
37 dummy text dummy text dummy text dummy text dummy text dummy text
38 <span class="d">D</span>
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 dummy text dummy text dummy text dummy text dummy text dummy text
53 dummy text dummy text dummy text dummy text dummy text dummy text
54 dummy text dummy text dummy text dummy text dummy text dummy text
55 dummy text dummy text dummy text dummy text dummy text dummy text
56 dummy text dummy text dummy text dummy text dummy text dummy text
57 dummy text dummy text dummy text dummy text dummy text dummy text
58 dummy text dummy text dummy text dummy text dummy text dummy text
59 dummy text dummy text dummy text dummy text dummy text dummy text