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: floats - zero height empty float</title>
7
8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9 <!-- Inspired by http://test.csswg.org/suites/css2.1/20100727/html4/floats-107.htm -->
10 <link rel="help" title="Section 9.5 Floats" href="http://www.w3.org/TR/CSS21/visuren.html#floats">
11 <meta content="A zero-height (margin-box) empty float without border and without padding will not require the line box to be shortened; in such case, the zero-height (margin-box) empty float will slide in or will fit in at the top of the line box." name="assert">
12 <meta content="" name="flags">
13
14 <style type="text/css">
15 #rel-pos-containing-block {position: relative;}
16
17 #green-overlapping-abs-pos
18 {
19 background-color: green;
20 border-top: green solid 2em;
21 border-bottom: green solid 2em;
22 left: 0em;
23 padding: 3em;
24 position: absolute;
25 width: 8em;
26 z-index: auto;
27 }
28
29 #zero-height-first-float
30 {
31 float: left;
32 width: 18em; /* or any other width number which would represent less than the document box width */
33 }
34
35 #red-overlapped-second-float
36 {
37 background-color: red;
38 float: left;
39 padding: 5em;
40 width: 4em;
41 }
42 </style>
43
44 </head>
45
46 <body>
47
48 <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
49
50 <div id="rel-pos-containing-block">
51 <div id="green-overlapping-abs-pos"></div>
52 <div id="zero-height-first-float"></div>
53 <div id="red-overlapped-second-float"></div>
54 </div>
55
56 </body>
57 </html>