page-container-001.xht (1509B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: paged media abspos containing block</title> 5 <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com" /> 6 <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-box" /> 7 <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule" /> 8 <meta name="flags" content="paged" /> 9 <meta name="assert" content="For a single-page document, the containing box for positioned content with no positioned ancestor is the page area." /> 10 <style type="text/css"> 11 12 @page 13 { 14 margin: .5in; 15 } 16 body 17 { 18 padding: 8px; 19 } 20 div 21 { 22 position: absolute; 23 width: 40%; 24 } 25 .topleft 26 { 27 top: 0; 28 left: 0; 29 background: blue; 30 } 31 .bottomright 32 { 33 bottom: 0; 34 right: 0; 35 background: fuchsia; 36 } 37 .centered 38 { 39 height: 20%; 40 width: 30%; 41 top: 40%; 42 left: 35%; 43 background: yellow; 44 } 45 p 46 { 47 margin-left: 55%; 48 } 49 50 </style> 51 </head> 52 <body> 53 <p>There must be three boxes containing descriptive text on this page.</p> 54 <div class="topleft">This blue box must be in the upper-left corner of the page, one half inch below the top of the page and one half inch from the left edge of the page.</div> 55 <div class="bottomright">This fuchsia box must be in the lower right corner, one half inch from the right and bottom edges of the page.</div> 56 <div class="centered">This yellow box must be centered on the page.</div> 57 </body> 58 </html>