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 { color: navy; font-size: 2em; margin: 1em; }
11 div { text-align: justify; }
12 p.end { text-align: right; }
13 .float { float: left; width: 50%; background: blue; color: white; font-variant: small-caps; }
14 .flow { color: silver; background: url(support/ruler-h-50%25.png) bottom center no-repeat; }
15 </style>
16 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats">
17 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" title="10.2 Content width: the 'width' property">
18 </head>
19 <body>
20 <!-- This test sucks. -->
21 <p>⇩ The following blue box should be exactly half the width
22 of the viewport, on the left of the 50% ruler mark.</p>
23 <div class="float">
24 ignore this float text ignore this float text ignore this float
25 text ignore this float text ignore this float text ignore this
26 float text ignore this float text ignore this float text ignore
27 this float text ignore this float text ignore this float text
28 ignore this float text ignore this float text ignore this float
29 text ignore this float text ignore this float text ignore this
30 float text ignore this float text ignore this float text ignore
31 this float text ignore this float text ignore this float text
32 ignore this float text ignore this float text ignore this float
33 text ignore this float text ignore this float text ignore this
34 float text ignore this float text ignore this float text ignore
35 this float text ignore this float text ignore this float text
36 ignore this float text ignore this float text ignore this float
37 text ignore this float text ignore this float text ignore this
38 float text ignore this float text ignore this float text ignore
39 this float text ignore this float text ignore this float text
40 ignore this float text ignore this float text ignore this float
41 </div>
42 <div class="flow">
43 this is some dummy text this is some dummy text this is some dummy
44 text this is some dummy text this is some dummy text this is some
45 dummy text this is some dummy text this is some dummy text this is
46 some dummy text this is some dummy text this is some dummy text
47 this is some dummy text this is some dummy text this is some dummy
48 text this is some dummy text this is some dummy text this is some
49 dummy text this is some dummy text this is some dummy text this is
50 some dummy text this is some dummy text this is some dummy text
51 this is some dummy text this is some dummy text this is some dummy
52 text this is some dummy text this is some dummy text this is some
53 dummy text this is some dummy text this is some dummy text this is
54 some dummy text this is some dummy text this is some dummy text
55 this is some dummy text this is some dummy text this is some dummy
56 text this is some dummy text this is some dummy text this is some
57 dummy text this is some dummy text this is some dummy text this is
58 some dummy text this is some dummy text this is some dummy text
59 this is some dummy text this is some dummy text this is some dummy
60 text this is some dummy text this is some dummy text this is some
61 dummy text this is some dummy text this is some dummy text this is
62 some dummy text this is some dummy text this is some dummy text
63 this is some dummy text this is some dummy text this is some dummy
64 text this is some dummy text this is some dummy text this is some
65 dummy text this is some dummy text this is some dummy text this is
66 some dummy text this is some dummy text this is some dummy text
67 this is some dummy text this is some dummy text this is some dummy
68 text this is some dummy text this is some dummy text this is some
69 dummy text this is some dummy text this is some dummy text this is
70 some dummy text this is some dummy text
71 </div>
72 <p class="end">The above gray text should flow around the blue box.
73 ⇧</p>
74 </body>
75 </html>