c5525-fltmult-000

float

WeasyPrint

This browser

Flags
image

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: float</title>
  5   <meta name="flags" content="image">
  6   <link rel="help" href="http://www.w3.org/TR/REC-CSS1#float">
  7   <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html">
  8   <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
  9   <style type="text/css">
 10    .a { color: navy; }
 11    div.yellow, div.blue, div.red, div.green {
 12     width: 60px; padding: 20px; margin: 10px;
 13     border: 20px solid black; float: left; text-align: center;
 14    }
 15    div.yellow {margin-left: 0px; background: yellow; color: black;}
 16    div.blue {background: blue; color: white;}
 17    div.red {background: red; color: black;}
 18    div.green {background: green; color: white;}
 19    div.below {clear: both;}
 20    table {margin: 10px 0px;}
 21   </style>
 22   <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats">
 23   <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
 24  </head>
 25  <body>
 26   <p class="a">
 27    Below you should see four blocks side by side followed by a
 28    matching cross section of the four blocks.
 29   </p>
 30   <div class="yellow">
 31    <p>
 32     Yellow
 33    </p>
 34   </div>
 35   <div class="blue">
 36    <p>
 37     Blue
 38    </p>
 39   </div>
 40   <div class="red">
 41    <p>
 42     Red
 43    </p>
 44   </div>
 45   <div class="green">
 46    <p>
 47     Green
 48    </p>
 49   </div>
 50   <div class="below">
 51    <table cellspacing="0" cellpadding="0">
 52     <tr>
 53      <td width="20" style="background: black">
 54       &nbsp;
 55      </td>
 56      <td width="100" style="background: yellow">
 57       &nbsp;
 58      </td>
 59      <td width="20" style="background: black">
 60       &nbsp;
 61      </td>
 62      <td width="20" style="background: white">
 63       &nbsp;
 64      </td>
 65      <td width="20" style="background: black">
 66       &nbsp;
 67      </td>
 68      <td width="100" style="background: blue">
 69       &nbsp;
 70      </td>
 71      <td width="20" style="background: black">
 72       &nbsp;
 73      </td>
 74      <td width="20" style="background: white">
 75       &nbsp;
 76      </td>
 77      <td width="20" style="background: black">
 78       &nbsp;
 79      </td>
 80      <td width="100" style="background: red">
 81       &nbsp;
 82      </td>
 83      <td width="20" style="background: black">
 84       &nbsp;
 85      </td>
 86      <td width="20" style="background: white">
 87       &nbsp;
 88      </td>
 89      <td width="20" style="background: black">
 90       &nbsp;
 91      </td>
 92      <td width="100" style="background: green">
 93       &nbsp;
 94      </td>
 95      <td width="20" style="background: black">
 96       &nbsp;
 97      </td>
 98     </tr>
 99    </table>
100   </div>
101  </body>
102 </html>