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: clear and clearance calculation - margin collapsing</title>
7
8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control">
10 <meta content="" name="flags">
11 <meta content="With clear: left, the top border edge of the last paragraph must be below the floating paragraph, i.e., 50px lower. That means that the margin-bottom of the first paragraph must not collapse with the margin-top of the last paragraph and clearance must be added such that clearance + margin-top of last paragraph = 50px, i.e., clearance = 50px - margin-top of last paragraph = 50px - 75px = - 25px." name="assert">
12
13 <style type="text/css">
14 body
15 {
16 margin: 8px;
17 }
18
19 #overlapped-red
20 {
21 background-color: red;
22 height: 100px;
23 left: 8px;
24 position: absolute;
25 right: 8px;
26 top: 108px;
27 z-index: -1;
28 }
29
30 #firstParg
31 {
32 height: 25px;
33 margin-bottom: 25px;
34 margin-top: 0px;
35 }
36
37 #floatingParg
38 {
39 float: left;
40 height: 50px;
41 margin: 0;
42 }
43
44 #lastParg
45 {
46 background-color: lime;
47 clear: left;
48 height: 100px;
49 margin-top: 75px;
50 }
51 </style>
52
53 </head>
54
55 <body>
56
57 <div id="overlapped-red"></div>
58
59 <p id="firstParg"></p>
60
61 <p id="floatingParg"></p>
62
63 <p id="lastParg"></p>
64
65 <p>Test passes if there is a wide bright green rectangle above and <strong>no red</strong>.</p>
66
67 </body>
68 </html>