c5525-fltcont-000

float

WeasyPrint

This browser

Flags
image

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: 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>