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 Float Alignment to Containing Block Edges</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 0 0.5em; border: 0.5em solid; border-bottom: none; background: navy; color: blue; }
11 .test p { width: 10em; padding: 0.25em; margin: 0; border: 0.25em solid; background: teal; color: aqua; }
12 .test p.left { float: left; }
13 .test p.right { float: right; }
14 </style>
15 <meta name="assert" content="A floated box is shifted to the left or right until its outer edge touches the containing block edge.">
16 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
17 </head>
18 <body>
19 <p>In the following test, the teal blocks must be just inside the
20 top and sides of the blue rectangle.</p>
21 <div class="test">
22 <div>
23 <p class="left"> Teal block. Teal block. Teal block. Teal block. Teal block. Teal block. Teal block. Teal block. </p>
24 <p class="right"> Teal block. Teal block. Teal block. Teal block. Teal block. Teal block. Teal block. Teal block. </p>
25 Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle.
26 Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle.
27 </div>
28 </div>
29 </body>
30 </html>