134706-7.html (5934B)
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</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 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> 8 <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> 9 <meta name="flags" content="" /> 10 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 11 <meta http-equiv="Content-Style-Type" content="text/css"> 12 <style type="text/css"> 13 14 table { margin: 0; border-spacing: 0; } 15 td, th { padding: 0; vertical-align: top; } 16 17 </style> 18 </head> 19 <body> 20 21 <!-- 6px margin between (from top, from bottom, from both) --> 22 23 <table width="300" style="background: aqua"><tr><td> 24 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 25 <div style="height: 5px; background: purple; margin-bottom: 6px;"></div> 26 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow;"></div> 27 </td></tr></table> 28 29 <table width="300" style="background: aqua"><tr><td> 30 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 31 <div style="height: 5px; background: purple;"></div> 32 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 6px;"></div> 33 </td></tr></table> 34 35 <table width="300" style="background: aqua"><tr><td> 36 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 37 <div style="height: 5px; background: purple; margin-bottom: 6px;"></div> 38 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 6px;"></div> 39 </td></tr></table> 40 41 <!-- 5px margin between (from both) --> 42 43 <table width="300" style="background: aqua"><tr><td> 44 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 45 <div style="height: 5px; background: purple; margin-bottom: 5px;"></div> 46 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 5px;"></div> 47 </td></tr></table> 48 49 <table width="300" style="background: aqua"><tr><td> 50 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 51 <div style="height: 5px; background: purple; margin-bottom: 10px;"></div> 52 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -5px;"></div> 53 </td></tr></table> 54 55 <table width="300" style="background: aqua"><tr><td> 56 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 57 <div style="height: 5px; background: purple; margin-bottom: -5px;"></div> 58 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 10px;"></div> 59 </td></tr></table> 60 61 <!-- 4px margin between (from both) --> 62 63 <table width="300" style="background: aqua"><tr><td> 64 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 65 <div style="height: 5px; background: purple; margin-bottom: 4px;"></div> 66 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 4px;"></div> 67 </td></tr></table> 68 69 <table width="300" style="background: aqua"><tr><td> 70 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 71 <div style="height: 5px; background: purple; margin-bottom: -1px;"></div> 72 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 5px;"></div> 73 </td></tr></table> 74 75 <table width="300" style="background: aqua"><tr><td> 76 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 77 <div style="height: 5px; background: purple; margin-bottom: -1px;"></div> 78 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 5px;"></div> 79 </td></tr></table> 80 81 <!-- negative margin between --> 82 83 <table width="300" style="background: aqua"><tr><td> 84 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 85 <div style="height: 5px; background: purple; margin-bottom: -4px;"></div> 86 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 0px;"></div> 87 </td></tr></table> 88 89 <table width="300" style="background: aqua"><tr><td> 90 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 91 <div style="height: 5px; background: purple; margin-bottom: 0px;"></div> 92 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -4px;"></div> 93 </td></tr></table> 94 95 <table width="300" style="background: aqua"><tr><td> 96 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 97 <div style="height: 5px; background: purple; margin-bottom: -4px;"></div> 98 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -1px;"></div> 99 </td></tr></table> 100 101 <table width="300" style="background: aqua"><tr><td> 102 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 103 <div style="height: 5px; background: purple; margin-bottom: -1px;"></div> 104 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -4px;"></div> 105 </td></tr></table> 106 107 <table width="300" style="background: aqua"><tr><td> 108 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 109 <div style="height: 5px; background: purple; margin-bottom: -4px;"></div> 110 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -4px;"></div> 111 </td></tr></table> 112 113 </body> 114 </html>