margin-collapse-clear-011.xht (3355B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Margin Collapsing with Clearance</title> 5 <link rel="author" title="Microsoft" href="http://microsoft.com/" /> 6 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> 8 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> 9 <meta name="flags" content="may" /> 10 <style type="text/css"> 11 .target1, .target2, .target3, .target4, .target5, .target6, .target7 12 { 13 position: absolute; 14 width: 0; 15 } 16 .target1, .target2, .target3, .target4 17 { 18 left: -155px; 19 } 20 .target5, .target6, .target7 21 { 22 left: 155px; 23 } 24 .target1, .target5 25 { 26 border-left: 150px solid yellow; 27 height: 50px; 28 top: 0px; 29 } 30 .target2, .target6 31 { 32 border-left: 20px solid aqua; 33 border-right: 130px solid silver; 34 height: 20px; 35 top: 50px; 36 } 37 .target3, .target7 38 { 39 border-left: 140px solid orange; 40 border-right: 10px solid silver; 41 height: 50px; 42 top: 100px; 43 } 44 .target4 45 { 46 border-left: 150px solid silver; 47 height: 30px; 48 top: 70px; 49 } 50 .target7 51 { 52 top: 70px; 53 } 54 .container 55 { 56 border: solid thin; 57 margin-left: 150px; 58 position: relative; 59 width: 150px; 60 } 61 .box1 62 { 63 background-color: yellow; 64 height: 50px; 65 } 66 .parentof2and3 67 { 68 background-color: silver; 69 padding-right: 10px; 70 } 71 .box2 72 { 73 background-color: aqua; 74 float: left; 75 height: 20px; 76 width: 20px; 77 } 78 .box3 79 { 80 background-color: orange; 81 clear: left; 82 height: 50px; 83 margin-top: 50px; 84 overflow: hidden; 85 } 86 </style> 87 </head> 88 <body> 89 <p>Test passes if the layout of the boxes within the black box matches either the left or the right reference boxes.</p> 90 <div class="container"> 91 <div class="target1"></div> 92 <div class="target2"></div> 93 <div class="target3"></div> 94 <div class="target4"></div> 95 <div class="target5"></div> 96 <div class="target6"></div> 97 <div class="target7"></div> 98 <div class="box1"></div> 99 <div class="parentof2and3"> 100 <div class="box2"></div> 101 <div class="box3"></div> 102 </div> 103 </div> 104 </body> 105 </html>