c414-flt-ln-003

Vertical Position of Floats

WeasyPrint

This browser

Source

 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   <link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements">
 6   <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html">
 7   <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
 8   <style type="text/css">
 9    p { color: navy; }
10    div { border: 5px solid purple; padding: 1em; margin: 1em; color: silver; font: 1em/1.3 serif; }
11    div p { width: 7em; padding: 1em; margin: 0; }
12    div .a { border: solid aqua; background-color: teal; color: white; }
13    div p.a { float: left; }
14    div .b { border: solid fuchsia; background-color: purple; color: white; }
15    div p.b { float: right; }
16   </style>
17   <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
18  </head>
19  <body>
20   <p>The big coloured boxes should be level with the top of the small
21   coloured boxes of the same color (unless there is not enough room
22   for the big box to fit on the small box's line after the small box,
23   in which case the big box should be as high as possible below the
24   small box).</p>
25   <div>
26    dummy text dummy text dummy text dummy text
27    <span class="a">A</span>
28    <p class="a">AAAA</p>
29    <span class="b">B</span>
30    <p class="b">BBBB</p>
31    dummy text dummy text dummy text dummy text dummy text dummy text
32    dummy text dummy text dummy text dummy text dummy text dummy text
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   </div>
52  </body>
53 </html>