blob: 2eb4b080a1c69f5d5adde871cacafb3028ebcf7d [file] [log] [blame]
ap9cd074c2006-01-05 20:48:53 +00001<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
thatcherffd46e02005-10-25 00:42:22 +00002<html>
3 <head>
4 <title>CSS 2.1 Test Suite: float</title>
5 <style type="text/css">
6 .a { color: navy; }
7 div.yellow, div.blue, div.red, div.green {
8 width: 60px; padding: 20px; margin: 10px;
9 border: 20px solid black; float: left; text-align: center;
10 }
11 div.yellow {margin-left: 0px; background: yellow; color: black;}
12 div.blue {background: blue; color: white;}
13 div.red {background: red; color: black;}
14 div.green {background: green; color: white;}
15 div.below {clear: both;}
16 table {margin: 10px 0px;}
17 </style>
darinec375482007-01-06 01:36:24 +000018 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats">
19 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
thatcherffd46e02005-10-25 00:42:22 +000020 </head>
21 <body>
22 <p class="a">
23 Below you should see four blocks side by side followed by a
24 matching cross section of the four blocks.
25 </p>
26 <div class="yellow">
27 <p>
28 Yellow
29 </p>
30 </div>
31 <div class="blue">
32 <p>
33 Blue
34 </p>
35 </div>
36 <div class="red">
37 <p>
38 Red
39 </p>
40 </div>
41 <div class="green">
42 <p>
43 Green
44 </p>
45 </div>
46 <div class="below">
darinec375482007-01-06 01:36:24 +000047 <table cellspacing="0" cellpadding="0">
thatcherffd46e02005-10-25 00:42:22 +000048 <tr>
darinec375482007-01-06 01:36:24 +000049 <td width="20" style="background: black">
thatcherffd46e02005-10-25 00:42:22 +000050  
51 </td>
darinec375482007-01-06 01:36:24 +000052 <td width="100" style="background: yellow">
thatcherffd46e02005-10-25 00:42:22 +000053  
54 </td>
darinec375482007-01-06 01:36:24 +000055 <td width="20" style="background: black">
thatcherffd46e02005-10-25 00:42:22 +000056  
57 </td>
darinec375482007-01-06 01:36:24 +000058 <td width="20" style="background: white">
thatcherffd46e02005-10-25 00:42:22 +000059  
60 </td>
darinec375482007-01-06 01:36:24 +000061 <td width="20" style="background: black">
thatcherffd46e02005-10-25 00:42:22 +000062  
63 </td>
darinec375482007-01-06 01:36:24 +000064 <td width="100" style="background: blue">
thatcherffd46e02005-10-25 00:42:22 +000065  
66 </td>
darinec375482007-01-06 01:36:24 +000067 <td width="20" style="background: black">
thatcherffd46e02005-10-25 00:42:22 +000068  
69 </td>
darinec375482007-01-06 01:36:24 +000070 <td width="20" style="background: white">
thatcherffd46e02005-10-25 00:42:22 +000071  
72 </td>
darinec375482007-01-06 01:36:24 +000073 <td width="20" style="background: black">
thatcherffd46e02005-10-25 00:42:22 +000074  
75 </td>
darinec375482007-01-06 01:36:24 +000076 <td width="100" style="background: red">
thatcherffd46e02005-10-25 00:42:22 +000077  
78 </td>
darinec375482007-01-06 01:36:24 +000079 <td width="20" style="background: black">
thatcherffd46e02005-10-25 00:42:22 +000080  
81 </td>
darinec375482007-01-06 01:36:24 +000082 <td width="20" style="background: white">
thatcherffd46e02005-10-25 00:42:22 +000083  
84 </td>
darinec375482007-01-06 01:36:24 +000085 <td width="20" style="background: black">
thatcherffd46e02005-10-25 00:42:22 +000086  
87 </td>
darinec375482007-01-06 01:36:24 +000088 <td width="100" style="background: green">
thatcherffd46e02005-10-25 00:42:22 +000089  
90 </td>
darinec375482007-01-06 01:36:24 +000091 <td width="20" style="background: black">
thatcherffd46e02005-10-25 00:42:22 +000092  
93 </td>
94 </tr>
95 </table>
96 </div>
97 </body>
98</html>