| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <title>CSS Test: float</title> |
| <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/> |
| <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> |
| <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-03 --> |
| <link rel="help" href="http://www.w3.org/TR/REC-CSS1#float"/> |
| <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats"/> |
| <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"/> |
| <link rel="match" href="c5525-fltmult-000-ref.xht" /> |
| |
| <meta name="flags" content="image" /> |
| |
| <style type="text/css"><![CDATA[ |
| div.yellow, div.blue, div.silver, div.green { |
| width: 60px; padding: 20px; margin: 10px; |
| border: 20px solid black; float: left; text-align: center; |
| } |
| div.yellow {margin-left: 0px; background: yellow; color: black;} |
| div.blue {background: blue; color: white;} |
| div.silver {background: silver; color: black;} |
| div.green {background: green; color: white;} |
| div.below {clear: both;} |
| table {border-spacing: 0px; margin: 10px 0px; table-layout: fixed;} |
| td {padding: 0px; width: 20px;} |
| td.onehundred {width: 100px;} |
| ]]></style> |
| </head> |
| <body> |
| <p class="a"> |
| Below you should see four blocks side by side followed by a |
| matching cross section of the four blocks. |
| </p> |
| <div class="yellow"> |
| <p> |
| Yellow |
| </p> |
| </div> |
| <div class="blue"> |
| <p> |
| Blue |
| </p> |
| </div> |
| <div class="silver"> |
| <p> |
| Silver |
| </p> |
| </div> |
| <div class="green"> |
| <p> |
| Green |
| </p> |
| </div> |
| <div class="below"> |
| <table> |
| <tr> |
| <td style="background: black"> |
| |
| </td> |
| <td class="onehundred" style="background: yellow"> |
| |
| </td> |
| <td style="background: black"> |
| |
| </td> |
| <td style="background: white"> |
| |
| </td> |
| <td style="background: black"> |
| |
| </td> |
| <td class="onehundred" style="background: blue"> |
| |
| </td> |
| <td style="background: black"> |
| |
| </td> |
| <td style="background: white"> |
| |
| </td> |
| <td style="background: black"> |
| |
| </td> |
| <td class="onehundred" style="background: silver"> |
| |
| </td> |
| <td style="background: black"> |
| |
| </td> |
| <td style="background: white"> |
| |
| </td> |
| <td style="background: black"> |
| |
| </td> |
| <td class="onehundred" style="background: green"> |
| |
| </td> |
| <td style="background: black"> |
| |
| </td> |
| </tr> |
| </table> |
| </div> |
| </body> |
| </html> |
