134706-7-ref.html (5185B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html lang="en-US"> 3 <head> 4 <title>CSS 2.1 Test Suite: Test for flow around floats (reference)</title> 5 <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> 6 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> 7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 8 <meta http-equiv="Content-Style-Type" content="text/css"> 9 <style type="text/css"> 10 11 table { margin: 0; border-spacing: 0; } 12 td, th { padding: 0; vertical-align: top; } 13 14 </style> 15 </head> 16 <body> 17 18 <!-- 6px margin between (from top, from bottom, from both) --> 19 20 <table width="300" style="background: aqua"><tr><td> 21 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 22 <div style="height: 5px; background: purple;"></div> 23 <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow; margin-top: 1px;"></div> 24 </td></tr></table> 25 26 <table width="300" style="background: aqua"><tr><td> 27 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 28 <div style="height: 5px; background: purple;"></div> 29 <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow; margin-top: 1px;"></div> 30 </td></tr></table> 31 32 <table width="300" style="background: aqua"><tr><td> 33 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 34 <div style="height: 5px; background: purple;"></div> 35 <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow; margin-top: 1px;"></div> 36 </td></tr></table> 37 38 <!-- 5px margin between (from both) --> 39 40 <table width="300" style="background: aqua"><tr><td> 41 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 42 <div style="height: 5px; background: purple;"></div> 43 <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> 44 </td></tr></table> 45 46 <table width="300" style="background: aqua"><tr><td> 47 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 48 <div style="height: 5px; background: purple;"></div> 49 <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> 50 </td></tr></table> 51 52 <table width="300" style="background: aqua"><tr><td> 53 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 54 <div style="height: 5px; background: purple;"></div> 55 <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> 56 </td></tr></table> 57 58 <!-- 4px margin between (from both) --> 59 60 <table width="300" style="background: aqua"><tr><td> 61 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 62 <div style="height: 5px; background: purple;"></div> 63 <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> 64 </td></tr></table> 65 66 <table width="300" style="background: aqua"><tr><td> 67 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 68 <div style="height: 5px; background: purple;"></div> 69 <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> 70 </td></tr></table> 71 72 <table width="300" style="background: aqua"><tr><td> 73 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 74 <div style="height: 5px; background: purple;"></div> 75 <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> 76 </td></tr></table> 77 78 <!-- negative margin between --> 79 80 <table width="300" style="background: aqua"><tr><td> 81 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 82 <div style="height: 5px; background: purple;"></div> 83 <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> 84 </td></tr></table> 85 86 <table width="300" style="background: aqua"><tr><td> 87 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 88 <div style="height: 5px; background: purple;"></div> 89 <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> 90 </td></tr></table> 91 92 <table width="300" style="background: aqua"><tr><td> 93 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 94 <div style="height: 5px; background: purple;"></div> 95 <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> 96 </td></tr></table> 97 98 <table width="300" style="background: aqua"><tr><td> 99 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 100 <div style="height: 5px; background: purple;"></div> 101 <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> 102 </td></tr></table> 103 104 <table width="300" style="background: aqua"><tr><td> 105 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 106 <div style="height: 5px; background: purple;"></div> 107 <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> 108 </td></tr></table> 109 110 </body> 111 </html>