anonymous-boxes-001.xht (1333B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Percent heights inside anonymous blocks</title> 5 <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> 6 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"/> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details"/> 8 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property"/> 9 <link rel="match" href="reference/ref-green-box-100x100.xht"/> 10 <meta name="assert" content="Anonymous block boxes are ignored when resolving 11 percentage values that would refer to it: the closest non-anonymous 12 ancestor box is used instead."/> 13 <style type="text/css"><![CDATA[ 14 #parent { height: 200px; position: relative; } 15 #child { float: left; height: 50%; width: 100px; background: green; position: relative } 16 #background { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: red } 17 ]]></style> 18 </head> 19 <body> 20 <p>There must be a green square below and no red.</p> 21 <div id="parent"> 22 <div id="background"></div> 23 <div id="child"></div> <div></div> 24 </div> 25 </body> 26 </html>