floats-130.xht (1979B)
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: CSS Floats: Float Sizing (blocks within styled floated tables within tables)</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/030.xml" type="application/xhtml+xml"/> 7 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/030.html" type="text/html"/> 8 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> 9 <meta name="flags" content="interact"/> 10 <style type="text/css"> 11 .table { display: table; } 12 .float { float: left; border: solid blue; color: silver; padding: 0.5em; margin: 0.5em; display: table; } 13 </style> 14 </head> 15 <body> 16 17 <p><strong>All blue boxes must always be the same size</strong>. Make your 18 window an inch or two bigger than than the width of one box to check. Try 19 resizing the window so that the boxes wrap in two or more columns. Try 20 resizing the window to be narrower than the boxes so that the text inside 21 them wraps into two or more lines.</p> 22 23 <div class="table"> 24 <div class="float"> <div> this is a float this is a float this is a float </div> </div> 25 <div class="float"> <div> this is a float this is a float this is a float </div> </div> 26 <div class="float"> <div> this is a float this is a float this is a float </div> </div> 27 <div class="float"> <div> this is a float this is a float this is a float </div> </div> 28 <div class="float"> <div> this is a float this is a float this is a float </div> </div> 29 <div class="float"> <div> this is a float this is a float this is a float </div> </div> 30 <div class="float"> <div> this is a float this is a float this is a float </div> </div> 31 <div class="float"> <div> this is a float this is a float this is a float </div> </div> 32 </div> 33 34 </body> 35 </html> 36