floats-106.xht (1637B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: CSS Floats: Unexpected Presences, Part 3</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/006.html" type="text/html"/> 7 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/006.xml" type="application/xhtml+xml"/> 8 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> 9 <style type="text/css"> 10 body * { margin: 4px; padding: 4px; border: 1px solid; display: block; } 11 .test { border-color: blue; width: 40em; } 12 .float { border-color: fuchsia; float: left; width: 5em; height: 5em; } 13 .first { border-color: purple; margin-left: 10em; } 14 .second { border-color: teal; width: 8em; } 15 </style> 16 </head> 17 <body> 18 <div class="test"> 19 <div class="first"> This is the first block, with a big left 20 margin. At the end of this block is a left float which should be 21 square. Text that follows this box should flow to the right of the 22 float or go below it; no text should be on the left of the float. 23 <div class="float"> This is the square left float. </div> </div> 24 <div class="second"> This is the second block. It is sized so as to 25 be just narrow enough to fit in the gap to the left of the 26 float. Text should not want to be to the left of the float, since 27 it is a left float in flow, so instead all the text should just 28 move below the float. </div> 29 </div> 30 </body> 31 </html>