724978.xhtml (5171B)
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-wait"> 3 <head> 4 <title>Multi-column Layout: AbsPos Pagination (Interlaced Dynamic Height)</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 html { 10 background: white; 11 } 12 13 .container { 14 background: red; 15 height: 24pt; 16 position: relative; 17 column-count: 2; 18 column-gap: 0; 19 } 20 .overflow { 21 width: 10pt; 22 border-bottom: lime 8px solid; 23 top: 0; 24 } 25 .following { 26 position: relative; 27 background: white; 28 width: 100pt; 29 } 30 #colset { 31 padding-top: 1px; 32 width: 300pt; 33 height: 2in; 34 column-count: 3; 35 column-gap: 0; 36 border: silver 2pt; 37 border-style: none solid; 38 } 39 #redline { 40 width: 303pt; 41 border-top: 8px solid red; 42 margin-top: -1in; 43 position: relative; 44 z-index: -1; 45 } 46 47 .ocontainer { 48 height: 0; 49 position: relative; 50 column-count: 2; 51 column-gap: 0; 52 } 53 .o1 { /* 3rd col */ 54 height: 10in; 55 } 56 .a1 { /* 1st col */ 57 position: absolute; 58 height: 2in; 59 width: 33pt; 60 } 61 .a2 { /* 2nd col */ 62 position: absolute; 63 height: 6in; 64 width: 25pt; 65 margin-left: 25pt; 66 } 67 .a3 { /* 3rd col */ 68 position: absolute; 69 height: 10in; 70 margin-left: 10pt; 71 } 72 .a4 { /* 2nd col */ 73 width: 25pt; 74 height: 6in; 75 } 76 77 .b1 { /* 3rd col */ 78 position: absolute; 79 height: 672pt; 80 margin-left: 20pt; 81 } 82 .b2 { /* 2nd col */ 83 position: absolute; 84 height: 384pt; 85 width: 25pt; 86 margin-left: 50pt; 87 } 88 .b3 { /* 3rd col */ 89 position: absolute; 90 height: 672pt; 91 margin-left: 30pt; 92 } 93 .b4 { /* 1st col, but no border */ 94 position: absolute; 95 height: 96pt; 96 border-bottom: none; 97 } 98 .b4 .child1 { /* 1st col */ 99 position: absolute; 100 height: 200%; 101 width: 33pt; 102 margin-left: 33pt; 103 } 104 .b4 .child2 { /* 3rd col */ 105 height: 672pt; 106 margin-left: 40pt; 107 108 } 109 .b5 { /* 1st col */ 110 position: absolute; 111 height: 96pt; 112 width: 34pt; 113 margin-left: 66pt; 114 } 115 .b6 { /* 3rd col */ 116 height: 672pt; 117 margin-left: 50pt; 118 } 119 120 .c1 { /* 3rd col */ 121 position: absolute; 122 height: 6in; 123 margin-left: 60pt; 124 } 125 .c2 { /* 2nd col */ 126 position: absolute; 127 height: 2in; 128 width: 25pt; 129 margin-left: 75pt; 130 } 131 .c3 { /* 3rd col */ 132 position: absolute; 133 height: 6in; 134 margin-left: 70pt; 135 } 136 .c4 { /* 3rd col */ 137 height: 6in; 138 width: 20pt; 139 margin-left: 80pt; 140 } 141 142 .f1 { 143 margin-top: -48pt; 144 height: 96pt; 145 margin-bottom: 96pt; 146 } 147 .f2 { 148 margin-top: -24pt; 149 height: 48pt; 150 } 151 152 .centerline { 153 margin: 0 auto; 154 top: 0; 155 left: 0; 156 right: 0; 157 position: absolute; 158 width: 8px; 159 height: 6in; 160 background: aqua; 161 } 162 163 #dynamo { 164 background: transparent; 165 border-bottom: 8px solid orange; 166 z-index: 10; 167 height: 384pt; 168 } 169 170 </style> 171 </head> 172 <body onload="document.getElementById('dynamo').style.height = '96pt'; 173 document.getElementById('dynamo').offsetHeight; 174 document.getElementById('dynamo').style.height = '672pt'; 175 document.getElementById('dynamo').offsetHeight; 176 document.getElementById('dynamo').style.height = '384pt'; 177 document.getElementById('dynamo').offsetHeight; 178 document.documentElement.className = '' 179 "> 180 <div id="colset"> 181 <div> 182 <div class="ocontainer"> 183 <div class="centerline"></div> 184 <div class="overflow o1"></div> 185 </div> 186 <div class="container"> 187 <div class="overflow a1"></div> 188 <div class="overflow a2"></div> 189 <div class="overflow a3"></div> 190 <div class="overflow a4"></div> 191 </div> 192 <div class="ocontainer"> 193 <div id="dynamo" class="centerline"></div> 194 </div> 195 <div class="container"> 196 <div class="overflow b1"></div> 197 <div class="overflow b2"></div> 198 <div class="overflow b3"></div> 199 <div class="overflow b4"> 200 <div class="overflow child1"></div> 201 <div class="overflow child2"></div> 202 </div> 203 <div class="overflow b5"></div> 204 <div class="overflow b6"></div> 205 </div> 206 </div> 207 <p class="following f1"> 208 </p> 209 <div class="container"> 210 <div class="overflow c1"></div> 211 <div class="overflow c2"></div> 212 <div class="overflow c3"></div> 213 <div class="overflow c4"></div> 214 </div> 215 <div class="following f2"></div> 216 </div> 217 <div id="redline"></div> 218 </body> 219 </html>