1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3
4 <head>
5
6 <title>CSS Test: Margin collapsing with clearance - margins of a 'collapsed through' box with clearance do not collapse with parent block's bottom margin</title>
7
8 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
9 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">
10 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
11 <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com">
12 <meta content="When an element has had clearance applied to it and its own margins collapse, these margins do not collapse with the bottom margin of the parent block" name="assert">
13 <meta content="" name="flags">
14
15 <style type="text/css">
16 #relatively-positioned-wrapper
17 {
18 position: relative;
19 }
20
21 #parent-lime
22 {
23 background-color: lime;
24 border-top: black solid 1px;
25 width: 50%;
26 }
27
28 #float-left-blue
29 {
30 background-color: blue;
31 float: left;
32 height: 100px;
33 width: 100px;
34 }
35
36 #clear-left
37 {
38 clear: left;
39 margin-bottom: 140px;
40 margin-top: 40px;
41 }
42
43 #next-yellow
44 {
45 background-color: yellow;
46 height: 100px;
47 }
48
49 .ref-overlapped-red
50 {
51 background-color: red;
52 position: absolute;
53 z-index: -1;
54 }
55
56 #ref1
57 {
58 height: 200px;
59 top: 1px;
60 width: 50%;
61 }
62
63 #ref2
64 {
65 height: 100px;
66 top: 201px;
67 width: 100%;
68 }
69 </style>
70
71 </head>
72
73 <body>
74
75 <p>Test passes if there is no red visible on the page.</p>
76
77 <div id="relatively-positioned-wrapper">
78
79 <!--
80 #float-left-blue's height = clearance + #clear-left's margin-top;
81 therefore, clearance is +60px
82 -->
83
84 <!--
85 #parent-lime should have height 200px, sum of:
86 height of #float-left-blue (100px)
87 part of #clear-left's margin-bottom "exceeding" the amount collapsed with margin-top (140px - 40px)
88 -->
89
90 <div id="parent-lime">
91 <div id="float-left-blue"></div>
92 <div id="clear-left"></div>
93 </div>
94
95 <!--
96 #next-yellow should immediately follow #parent-lime (no margins in between)
97 -->
98 <div id="next-yellow"></div>
99
100 <!--
101 #ref1 and #ref2 boxes create a sort of 'reference rendering' where #ref1 should be covered, overlapped by #parent-lime while #ref2 should be covered, overlapped by #next-yellow.
102 -->
103 <div id="ref1" class="ref-overlapped-red"></div>
104 <div id="ref2" class="ref-overlapped-red"></div>
105
106 </div>
107
108 </body>
109 </html>