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: CSS Floats: Unexpected Presences, Part 2</title>
5 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
6 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/005.xml" type="application/xhtml+xml">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats">
8 <style type="text/css">
9 body * { margin: 4px; padding: 4px; border: 1px solid; display: block; }
10 .test { border-color: blue; width: 40em; }
11 .float { border-color: fuchsia; float: left; width: 5em; height: 5em; }
12 .first { border-color: purple; margin-left: 10em; }
13 .second { border-color: teal; width: 10em; }
14 </style>
15 </head>
16 <body>
17 <div class="test">
18 <div class="first"> This is the first block, with a big left margin. At the end
19 of this block is a left float which should be square. Text that
20 follows this box should flow to the right of the float or go below
21 it; no text should be on the left of the float. <div class="float"> This is
22 the square left float. </div> </div>
23 <div class="second"> This is the second block. It is sized so as to be just
24 wide enough to slightly overlap the float. Text shouldn't be able
25 to fit around the float without overflowing this box, so instead
26 all the text should just move below the float. </div>
27 </div>
28 </body>
29 </html>