abspos-overflow-01.xhtml (4547B)
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" class="reftest-paged"> 3 <head> 4 <title>Multi-column Layout: AbsPos Pagination (Interlaced)</title> 5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> 6 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property"/> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#length-units"/> 8 <style type="text/css"> 9 /* If the reftest print size change, this needs to change too. */ 10 html, body { 11 margin: 0; 12 padding: 0; 13 } 14 15 .container { 16 background: red; 17 height: 24pt; 18 position: relative; 19 } 20 .overflow { 21 width: 10pt; 22 border-bottom: lime 4px solid; 23 top: 0; 24 } 25 .following { 26 font-size: 10pt; 27 line-height: 10pt; 28 font-family: sans-serif; 29 text-align: center; 30 position: relative; 31 background: white; 32 width: 100pt; 33 } 34 #pageset { 35 width: 100pt; 36 border: silver 2pt; 37 border-style: none solid; 38 height: 6in; 39 } 40 .redline { 41 float: left; 42 margin-right: -103pt; 43 width: 103pt; 44 border-bottom: 8px solid red; 45 position: relative; 46 z-index: -1; 47 } 48 .r1 { 49 height: 50%; 50 } 51 .r2 { 52 height: 150%; 53 } 54 .r3 { 55 height: 250%; 56 } 57 58 .ocontainer { 59 height: 0; 60 } 61 .o1 { /* 3rd page */ 62 height: 5in; 63 } 64 .a1 { /* 1st page */ 65 position: absolute; 66 height: 1in; 67 width: 33pt; 68 } 69 .a2 { /* 2nd page */ 70 position: absolute; 71 height: 3in; 72 width: 25pt; 73 margin-left: 25pt; 74 } 75 .a3 { /* 3rd page */ 76 position: absolute; 77 height: 5in; 78 margin-left: 10pt; 79 } 80 .a4 { /* 2nd page */ 81 width: 25pt; 82 height: 3in; 83 } 84 85 .b1 { /* 3rd page */ 86 position: absolute; 87 height: 336pt; 88 margin-left: 20pt; 89 } 90 .b2 { /* 2nd page */ 91 position: absolute; 92 height: 192pt; 93 width: 25pt; 94 margin-left: 50pt; 95 } 96 .b3 { /* 3rd page */ 97 position: absolute; 98 height: 336pt; 99 margin-left: 30pt; 100 } 101 .b4 { /* 1st col, but no border */ 102 position: absolute; 103 height: 48pt; 104 border-bottom: none; 105 } 106 .b4 .child1 { /* 1st page */ 107 position: absolute; 108 height: 100%; 109 width: 33pt; 110 margin-left: 33pt; 111 } 112 .b4 .child2 { /* 3rd page */ 113 height: 336pt; 114 margin-left: 40pt; 115 116 } 117 .b5 { /* 1st page */ 118 position: absolute; 119 height: 48pt; 120 width: 34pt; 121 margin-left: 66pt; 122 } 123 .b6 { /* 3rd page */ 124 height: 336pt; 125 margin-left: 50pt; 126 } 127 128 .c1 { /* 3rd page */ 129 position: absolute; 130 height: 3in; 131 margin-left: 60pt; 132 } 133 .c2 { /* 2nd page */ 134 position: absolute; 135 height: 1in; 136 width: 25pt; 137 margin-left: 75pt; 138 } 139 .c3 { /* 3rd page */ 140 position: absolute; 141 height: 3in; 142 margin-left: 70pt; 143 } 144 .c4 { /* 3rd page */ 145 height: 3in; 146 width: 20pt; 147 margin-left: 80pt; 148 } 149 150 .f1 { 151 margin-top: -48pt; 152 height: 48pt; 153 margin-bottom: 96pt; 154 } 155 .f2 { 156 margin-top: -24pt; 157 height: 24pt; 158 } 159 </style> 160 </head> 161 <body> 162 <div class="redline r1"></div> 163 <div class="redline r2"></div> 164 <div class="redline r3"></div> 165 166 <div id="pageset"> 167 <div> 168 <div class="ocontainer"> 169 <div class="overflow o1"></div> 170 </div> 171 <div class="container"> 172 <div class="overflow a1"></div> 173 <div class="overflow a2"></div> 174 <div class="overflow a3"></div> 175 <div class="overflow a4"></div> 176 </div> 177 <div class="container"> 178 <div class="overflow b1"></div> 179 <div class="overflow b2"></div> 180 <div class="overflow b3"></div> 181 <div class="overflow b4"> 182 <div class="overflow child1"></div> 183 <div class="overflow child2"></div> 184 </div> 185 <div class="overflow b5"></div> 186 <div class="overflow b6"></div> 187 </div> 188 </div> 189 <p class="following f1"> 190 There must be 3 pages, a single green line on each page, and no red. 191 </p> 192 <div class="container"> 193 <div class="overflow c1"></div> 194 <div class="overflow c2"></div> 195 <div class="overflow c3"></div> 196 <div class="overflow c4"></div> 197 </div> 198 <div class="following f2"></div> 199 </div> 200 </body> 201 </html>