page-left-right-001-print-ref.html (636B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <style> 4 @page { 5 size: 600px 300px; 6 margin: 0; 7 } 8 :root { 9 print-color-adjust: exact; 10 } 11 body { 12 margin: 0; 13 } 14 div { 15 break-after: page; 16 width: 100px; 17 height: 100px; 18 overflow: clip; /* Depending on font, glyphs may overflow. */ 19 background: yellow; 20 } 21 div:nth-child(odd) { 22 margin-top: 200px; 23 } 24 div:nth-child(even) { 25 margin-left: 500px; 26 } 27 </style> 28 <div> 29 bottom left corner 30 </div> 31 <div> 32 top right corner 33 </div> 34 <div> 35 bottom left corner 36 </div> 37 <div> 38 top right corner 39 </div>