float-006.xht (1774B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>CSS Test: floats - zero height empty float</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 10 11 <!-- Inspired by http://test.csswg.org/suites/css2.1/20100727/html4/floats-107.htm --> 12 13 <link rel="help" title="Section 9.5 Floats" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> 14 <link rel="match" href="float-006-ref.xht" /> 15 16 <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" /> 17 18 <style type="text/css"><![CDATA[ 19 #rel-pos-containing-block {position: relative;} 20 21 #green-overlapping-abs-pos 22 { 23 background-color: green; 24 border-bottom: green solid 2em; 25 border-top: green solid 2em; 26 left: 0em; 27 padding: 3em; 28 position: absolute; 29 width: 8em; 30 z-index: auto; 31 } 32 33 #zero-height-first-float 34 { 35 float: left; 36 width: 18em; 37 /* 38 or any other width number which would 39 represent less than the document box width 40 */ 41 } 42 43 #red-overlapped-second-float 44 { 45 background-color: red; 46 float: left; 47 padding: 5em; 48 width: 4em; 49 } 50 ]]></style> 51 52 </head> 53 54 <body> 55 56 <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> 57 58 <div id="rel-pos-containing-block"> 59 <div id="green-overlapping-abs-pos"></div> 60 <div id="zero-height-first-float"></div> 61 <div id="red-overlapped-second-float"></div> 62 </div> 63 64 </body> 65 </html>