1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: Clearance calculations - clear box non-collapsing margins with larger clearance than margins</title>
5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control">
7 <meta name="flags" content="ahem image">
8 <meta name="assert" content="If after margin collapsing the position of the cleared element is above or hypothetically positioned within the layout position of the float. Then the cleared element is positioned directly below the floated element.">
9 <!-- C1 = H-M2 -->
10 <!-- C2 = Max(M1, M2) - M1 - M2 -->
11 <style type="text/css">
12 div
13 {
14 font: 20px/1em Ahem;
15 width: 5em;
16 }
17 #parent
18 {
19 background: url('support/clear-clearance-calculation-002.png');
20 min-height: 8em;
21 }
22 div div
23 {
24 background: green;
25 height: 1em;
26 }
27 #div1
28 {
29 margin-bottom: 4em;
30 }
31 #div2
32 {
33 float: left;
34 height: 2em;
35 margin: 0;
36 }
37 #div3
38 {
39 clear: left;
40 margin-top: 3em;
41 }
42 </style>
43 </head>
44 <body>
45 <p>Test passes if there is no red visible on the page.</p>
46 <div id="parent">
47 <div id="div1"></div>
48 <div id="div2"></div>
49 <div id="div3"></div>
50 </div>
51 </body>
52 </html>