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 collapse with the adjoining margins of following siblings but the resulting margin does 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: 80px;
40 margin-top: 40px;
41 }
42
43 #sole-following-sibling
44 {
45 margin-bottom: 140px;
46 }
47
48 #next-yellow
49 {
50 background-color: yellow;
51 height: 100px;
52 }
53
54 .ref-overlapped-red
55 {
56 background-color: red;
57 position: absolute;
58 z-index: -1;
59 }
60
61 #ref1
62 {
63 height: 200px;
64 top: 1px;
65 width: 50%;
66 }
67
68 #ref2
69 {
70 height: 100px;
71 top: 201px;
72 width: 100%;
73 }
74 </style>
75
76 </head>
77
78 <body>
79
80 <p>Test passes if there is no red visible on the page.</p>
81
82 <div id="relatively-positioned-wrapper">
83
84 <!--
85 #parent-lime should have height 200px, sum of:
86 height of #float-left-blue (100px)
87 part of #sole-following-sibling's margin-bottom "exceeding" the amount collapsed with #clear-left's 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 <!-- clearance + margin-top of #clear-left = height of #float-left-blue; therefore, clearance is equal to +60px -->
94 <div id="sole-following-sibling"></div>
95 </div>
96
97 <div id="next-yellow"></div>
98
99 <!--
100 #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.
101 -->
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>