floats-128

CSS Floats: Float Sizing (styled blocks within floated tables)

WeasyPrint

This browser

Flags
interact

Source

 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: Float Sizing (styled blocks within floated 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/028.xml" type="application/xhtml+xml">
 7   <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/028.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    .float { float: left; display: table; }
12    .float div { margin: 0; border: solid blue; color: silver; padding: 0.5em; margin: 0.5em; } 
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="float"> <div> this is a float this is a float this is a float </div> </div>
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 
32  </body>
33 </html>