1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
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 <meta name="flags" content="paged">
8 <meta name="assert" content="The right and left pages of a document may use differing margin styles that yield different page area widths, but the UA may adjust the margins such that the page area widths are the same. ">
9 <style type="text/css">
10
11 @page :first {
12 margin: 7%;
13 }
14 @page :left {
15 margin-left: 50%;
16 margin-right: 7%;
17 }
18 @page :right {
19 margin-right: 33%;
20 margin-left: 7%;
21 }
22 div {
23 margin-bottom: 2em;
24 width: 98%
25 }
26 .edged {
27 border: medium solid blue;
28 background: #ececff;
29 padding: 1%;
30 page-break-after: always;
31 }
32
33 .style1 {
34 background-color: #ececff;
35 }
36
37 </style>
38 </head>
39 <body>
40 <div>
41 This test produces three pages on paged media.
42 </div>
43 <div class="edged">
44 This page should have typical right and left margins. This content is completely enclosed by a blue border and has a pale blue background. A page break follows.
45 </div>
46 <div class="edged">
47 This content should be entirely on the right side of the page (but might instead
48 have margins like the first page). It is completely enclosed by a blue border and has a pale blue background. A page break follows.
49 </div>
50 <div class="edged">
51 This page should have a wide right margin and narrow left margin (but might
52 instead have margins like the first page). This content has a blue border on all sides and a pale blue background.
53 </div>
54 </body>
55 </html>