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: Non-Replaced Floating Left vs. Right</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 .test div { margin: 1em; padding: 0.5em; background: teal; color: aqua; }
11 .test p { width: 10em; padding: 0.25em; margin: 0; border: 0.25em solid blue; background: navy; color: white; }
12 .test p.left { float: left; }
13 .test p.right { float: right; }
14 </style>
15 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
16 </head>
17 <body>
18 <p>In the following test, the blue blocks should be on the given sides of the teal rectangle.</p>
19 <div class="test">
20 <div>
21 <p class="left"> ⇦ This blue block should be on the left. </p>
22 <p class="right"> ⇨ This blue block should be on the right. </p>
23 Teal rectangle. Teal rectangle. Teal rectangle. Teal rectangle. Teal rectangle. Teal rectangle.
24 Teal rectangle. Teal rectangle. Teal rectangle. Teal rectangle. Teal rectangle. Teal rectangle.
25 </div>
26 </div>
27 </body>
28 </html>