134706-4.html (3952B)
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; } 16 17 </style> 18 </head> 19 <body> 20 21 <table width="300" style="background: aqua"><tr><td> 22 <div style="float:left; background:blue; width: 100px; height: 20px"></div> 23 <div style="float:left; background:silver; width: 100px; height: 6px"></div> 24 <table style="background: yellow"><tr><td> 25 <div style="width: 150px; height: 10px; background: purple"></div> 26 </td></tr></table> 27 </td></tr></table> 28 29 <table width="300" style="background: aqua"><tr><td> 30 <div style="float:left; background:blue; width: 100px; height: 20px"></div> 31 <div style="float:right; background:silver; width: 100px; height: 6px"></div> 32 <table style="background: yellow"><tr><td> 33 <div style="width: 150px; height: 10px; background: purple"></div> 34 </td></tr></table> 35 </td></tr></table> 36 37 <table width="300" style="background: aqua"><tr><td> 38 <div style="float:right; background:blue; width: 100px; height: 20px"></div> 39 <div style="float:left; background:silver; width: 100px; height: 6px"></div> 40 <table style="background: yellow"><tr><td> 41 <div style="width: 150px; height: 10px; background: purple"></div> 42 </td></tr></table> 43 </td></tr></table> 44 45 <table width="300" style="background: aqua"><tr><td> 46 <div style="float:right; background:blue; width: 100px; height: 20px"></div> 47 <div style="float:right; background:silver; width: 100px; height: 6px"></div> 48 <table style="background: yellow"><tr><td> 49 <div style="width: 150px; height: 10px; background: purple"></div> 50 </td></tr></table> 51 </td></tr></table> 52 53 <table width="300" style="background: aqua"><tr><td> 54 <div style="float:left; background:blue; width: 100px; height: 20px"></div> 55 <div style="float:left; background:silver; width: 100px; height: 6px"></div> 56 <div style="overflow: hidden; background: yellow"> 57 <div style="width: 150px; height: 10px; background: purple"></div> 58 </div> 59 </td></tr></table> 60 61 <table width="300" style="background: aqua"><tr><td> 62 <div style="float:left; background:blue; width: 100px; height: 20px"></div> 63 <div style="float:right; background:silver; width: 100px; height: 6px"></div> 64 <div style="overflow: hidden; background: yellow"> 65 <div style="width: 150px; height: 10px; background: purple"></div> 66 </div> 67 </td></tr></table> 68 69 <table width="300" style="background: aqua"><tr><td> 70 <div style="float:right; background:blue; width: 100px; height: 20px"></div> 71 <div style="float:left; background:silver; width: 100px; height: 6px"></div> 72 <div style="overflow: hidden; background: yellow"> 73 <div style="width: 150px; height: 10px; background: purple"></div> 74 </div> 75 </td></tr></table> 76 77 <table width="300" style="background: aqua"><tr><td> 78 <div style="float:right; background:blue; width: 100px; height: 20px"></div> 79 <div style="float:right; background:silver; width: 100px; height: 6px"></div> 80 <div style="overflow: hidden; background: yellow"> 81 <div style="width: 150px; height: 10px; background: purple"></div> 82 </div> 83 </td></tr></table> 84 85 </body> 86 </html>