page-props-103.xht (1475B)
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: Right and Left Pages (page area equal)</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-selectors" /> 7 <link rel="help" href="http://www.w3.org/TR/css3-page/#left-right-first" /> 8 <meta name="flags" content="paged" /> 9 <meta name="assert" content="The right and left pages of a document may use differing margin styles that yield different page area heights." /> 10 <style type="text/css"> 11 12 @page :right { 13 margin-bottom: 66%; 14 } 15 @page :left { 16 margin-bottom: 10%; 17 } 18 html, body, div.page { 19 height: 100%; 20 margin: 0; 21 padding: 0; 22 } 23 div.page { 24 position: relative; 25 page-break-after: always; 26 } 27 p { 28 border-bottom: medium blue solid; 29 position: absolute; 30 bottom: 0; 31 width: 100%; 32 } 33 34 </style> 35 </head> 36 <body> 37 <div class="page"> 38 <div> 39 This test produces two pages on paged media. 40 </div> 41 <div> 42 There is a horizontal blue line about one third of the way down the page. 43 </div> 44 <p></p> 45 </div> 46 <div class="page"> 47 <div> 48 There is a horizontal blue line near the bottom of the page. 49 </div> 50 <p></p> 51 </div> 52 </body> 53 </html>