c5525-fltwidth-000.xht (2939B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: float</title> 5 <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/> 6 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> 7 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-03 --> 8 <link rel="help" href="http://www.w3.org/TR/REC-CSS1#float"/> 9 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats"/> 10 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" title="10.2 Content width: the 'width' property"/> 11 12 <meta name="flags" content="image" /> 13 14 <style type="text/css"><![CDATA[ 15 p { font-size: 2em; margin: 1em; } 16 div { text-align: justify; } 17 p.end { text-align: right; } 18 .float { float: left; width: 50%; background: blue; color: white; font-variant: small-caps; } 19 .flow { color: silver; background: url(support/ruler-h-50%25.png) bottom center no-repeat; } 20 ]]></style> 21 </head> 22 <body> 23 <!-- This test sucks. --> 24 <p>⇩ The following blue box should be exactly half the width 25 of the viewport, on the left of the 50% ruler mark.</p> 26 <div class="float"> 27 ignore this float text ignore this float text ignore this float 28 text ignore this float text ignore this float text ignore this 29 float text ignore this float text ignore this float text ignore 30 this float text ignore this float text ignore this float text 31 ignore this float text ignore this float text ignore this float 32 </div> 33 <div class="flow"> 34 this is some dummy text this is some dummy text this is some dummy 35 text this is some dummy text this is some dummy text this is some 36 dummy text this is some dummy text this is some dummy text this is 37 some dummy text this is some dummy text this is some dummy text 38 this is some dummy text this is some dummy text this is some dummy 39 text this is some dummy text this is some dummy text this is some 40 dummy text this is some dummy text this is some dummy text this is 41 some dummy text this is some dummy text this is some dummy text 42 this is some dummy text this is some dummy text this is some dummy 43 text this is some dummy text this is some dummy text this is some 44 dummy text this is some dummy text this is some dummy text this is 45 some dummy text this is some dummy text this is some dummy text 46 this is some dummy text this is some dummy text this is some dummy 47 text this is some dummy text this is some dummy text this is some 48 dummy text this is some dummy text this is some dummy text this is 49 some dummy text this is some dummy text 50 </div> 51 <p class="end">The above gray text should flow around the blue box. 52 ⇧</p> 53 </body> 54 </html>