exclusions-wrap-flow-04-ref.xht (1718B)
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 #exclusion { 37 display: inline-block; 38 top: 150px; 39 left: 150px; 40 width: 100px; 41 height: 100px; 42 background: #0f0; 43 } 44 45 #clear-area-a, #clear-area-b { 46 display: inline-block; 47 background: #080; 48 width: 150px; 49 height: 100px; 50 } 51 /*]]>*/ 52 </style> 53 </head> 54 <body> 55 <p>You should see a light green square centered in a solid dark green 100px high dark green stripe on top of a 400px by 400px black background. You should not see any red background.</p> 56 <div id="containing-block"><div id="top-fragment"></div><div id="clear-area-a"></div><div id="exclusion"></div><div id="clear-area-b"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div> 57 </body> 58 </html>