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: float</title>
5 <meta name="flags" content="image">
6 <link rel="help" href="http://www.w3.org/TR/REC-CSS1#float">
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 { margin: 0; padding: 0; text-align: justify;}
11 .eight {float: left; width: 25%; color: white;
12 background: navy url(support/square-purple.png) top right no-repeat;
13 padding: 0; margin: 0}
14 .nine {float: right; width: 50%;
15 background-color: teal; color: aqua;
16 padding: 0; margin: 0}
17 span { color: navy; }
18 </style>
19 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats">
20 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#block-root-margin" title="10.6.6 Complicated cases">
21 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
22 </head>
23 <body>
24 <div class="eight" style="width: 75%">
25 <div class="nine" style="margin-right: 17px">
26 <p>
27 To the right of this teal box there should be a purple square,
28 tightly squeezed in between the edge of the teal box and the
29 outside edge of the blue block. ⇨
30 </p>
31 </div>
32 <p>
33 Inside this blue block on the right there should be a teal box. ⇨
34 <span>
35 FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
36 FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
37 FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
38 FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
39 FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
40 FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
41 FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
42 FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
43 FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
44 FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
45 FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
46 FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
47 FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
48 </span>
49 </p>
50 </div>
51 </body>
52 </html>