exclusions-wrap-flow-02-ref.xht (1898B)
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: wrap-flow:none</title> 5 <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/> 6 <style> 7 /*<![CDATA[*/ 8 9 #containing-block { 10 position: relative; 11 width: 400px; 12 background: red; 13 font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */ 14 } 15 16 #top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b { 17 display: inline-block; 18 background: black; 19 } 20 21 #top-fragment { 22 width: 400px; 23 height: 150px; 24 } 25 26 #bottom-fragment-a { 27 width: 150px; 28 height:150px; 29 } 30 31 #bottom-fragment-b { 32 width: 250px; 33 height: 150px; 34 } 35 36 #left-fragment { 37 width: 150px; 38 height: 100px; 39 } 40 41 #exclusion { 42 display: inline-block; 43 top: 150px; 44 left: 150px; 45 width: 100px; 46 height: 100px; 47 background: #0f0; 48 } 49 50 #clear-area { 51 display: inline-block; 52 background: #080; 53 top: 150px; 54 left: 250px; 55 width: 150px; 56 height: 100px; 57 } 58 59 60 /*]]>*/ 61 </style> 62 </head> 63 <body> 64 <p>You should see a light green square centered in a solid 400px by 400px black background with a darker green area extending to the 65 right of the light green area and to the edge of the black background container. You should not see any red background.</p> 66 <div id="containing-block"><div id="top-fragment"></div><div id="left-fragment"></div><div id="exclusion"></div><div id="clear-area"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div> 67 </body> 68 </html>