dynamic-abspos-overflow-01-cols.xhtml (6737B)
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 } 18 .overflow { 19 width: 10pt; 20 border-bottom: lime 8px solid; 21 top: 0; 22 } 23 .following { 24 position: relative; 25 background: white; 26 width: 100pt; 27 } 28 #colset { 29 padding-top: 1px; 30 width: 300pt; 31 height: 2in; 32 column-count: 3; 33 column-gap: 0; 34 border: silver 2pt; 35 border-style: none solid; 36 } 37 #redline { 38 width: 303pt; 39 border-top: 8px solid red; 40 margin-top: -1in; 41 position: relative; 42 z-index: -1; 43 } 44 45 .ocontainer { 46 height: 0; 47 position: relative; 48 } 49 .o1 { /* 3rd col */ 50 height: 5in; 51 } 52 .a1 { /* 1st col */ 53 position: absolute; 54 height: 1in; 55 width: 33pt; 56 } 57 .a2 { /* 2nd col */ 58 position: absolute; 59 height: 3in; 60 width: 25pt; 61 margin-left: 25pt; 62 } 63 .a3 { /* 3rd col */ 64 position: absolute; 65 height: 5in; 66 margin-left: 10pt; 67 } 68 .a4 { /* 2nd col */ 69 width: 25pt; 70 height: 3in; 71 } 72 73 .b1 { /* 3rd col */ 74 position: absolute; 75 height: 336pt; 76 margin-left: 20pt; 77 } 78 .b2 { /* 2nd col */ 79 position: absolute; 80 height: 192pt; 81 width: 25pt; 82 margin-left: 50pt; 83 } 84 .b3 { /* 3rd col */ 85 position: absolute; 86 height: 336pt; 87 margin-left: 30pt; 88 } 89 .b4 { /* 1st col, but no border */ 90 position: absolute; 91 height: 48pt; 92 border-bottom: none; 93 } 94 .b4 .child1 { /* 1st col */ 95 position: absolute; 96 height: 100%; 97 width: 33pt; 98 margin-left: 33pt; 99 } 100 .b4 .child2 { /* 3rd col */ 101 height: 336pt; 102 margin-left: 40pt; 103 104 } 105 .b5 { /* 1st col */ 106 position: absolute; 107 height: 48pt; 108 width: 34pt; 109 margin-left: 66pt; 110 } 111 .b6 { /* 3rd col */ 112 height: 336pt; 113 margin-left: 50pt; 114 } 115 116 .c1 { /* 3rd col */ 117 position: absolute; 118 height: 3in; 119 margin-left: 60pt; 120 } 121 .c2 { /* 2nd col */ 122 position: absolute; 123 height: 1in; 124 width: 25pt; 125 margin-left: 75pt; 126 } 127 .c3 { /* 3rd col */ 128 position: absolute; 129 height: 3in; 130 margin-left: 70pt; 131 } 132 .c4 { /* 3rd col */ 133 height: 3in; 134 width: 20pt; 135 margin-left: 80pt; 136 } 137 138 .f1 { 139 margin-top: -48pt; 140 height: 48pt; 141 margin-bottom: 96pt; 142 } 143 .f2 { 144 margin-top: -24pt; 145 height: 24pt; 146 } 147 148 .centerline { 149 margin: 0 auto; 150 top: 0; 151 left: 0; 152 right: 0; 153 position: absolute; 154 width: 8px; 155 height: 6in; 156 background: aqua; 157 } 158 159 #dynamo { 160 background: transparent; 161 border-bottom: 8px solid orange; 162 z-index: 10; 163 height: 192pt; 164 } 165 166 </style> 167 </head> 168 <body onload="document.getElementById('dynamo').style.height = '48pt'; 169 document.getElementById('dynamo').offsetHeight; 170 document.getElementById('dynamo').style.height = '336pt'; 171 document.getElementById('dynamo').offsetHeight; 172 document.getElementById('dynamo').style.height = '48pt'; 173 document.getElementById('dynamo').offsetHeight; 174 document.getElementById('dynamo').style.height = '192pt'; 175 document.getElementById('dynamo').offsetHeight; 176 document.getElementById('dynamo').style.height = '1500pt'; 177 document.getElementById('dynamo').offsetHeight; 178 document.getElementById('dynamo').style.height = '48pt'; 179 document.getElementById('dynamo').offsetHeight; 180 document.getElementById('dynamo').style.height = '192pt'; 181 document.getElementById('dynamo').offsetHeight; 182 document.getElementById('dynamo').style.height = '336pt'; 183 document.getElementById('dynamo').offsetHeight; 184 document.getElementById('dynamo').style.height = '192pt'; 185 document.getElementById('dynamo').offsetHeight; 186 document.getElementById('dynamo').style.height = '48pt'; 187 document.getElementById('dynamo').offsetHeight; 188 document.getElementById('dynamo').style.height = '192pt'; 189 document.documentElement.className = '' 190 "> 191 <p>There must be a single green line with an orange square where 192 it intersects with the middle aqua line, and no red. The following 193 links must move the orange square to the intersection with the 194 indicated aqua line:</p> 195 <p> 196 <a href="asdljlwjerlk-unvisited" onclick="document.getElementById('dynamo').style.height = '48pt'; return false;">Left</a> 197 <a href="asdljlwjerlk-unvisited" onclick="document.getElementById('dynamo').style.height = '192pt'; return false;">Center</a> 198 <a href="asdljlwjerlk-unvisited" onclick="document.getElementById('dynamo').style.height = '336pt'; return false;">Right</a> 199 </p> 200 <div id="colset"> 201 <div> 202 <div class="ocontainer"> 203 <div class="centerline"></div> 204 <div class="overflow o1"></div> 205 </div> 206 <div class="container"> 207 <div class="overflow a1"></div> 208 <div class="overflow a2"></div> 209 <div class="overflow a3"></div> 210 <div class="overflow a4"></div> 211 </div> 212 <div class="ocontainer"> 213 <div id="dynamo" class="centerline"></div> 214 </div> 215 <div class="container"> 216 <div class="overflow b1"></div> 217 <div class="overflow b2"></div> 218 <div class="overflow b3"></div> 219 <div class="overflow b4"> 220 <div class="overflow child1"></div> 221 <div class="overflow child2"></div> 222 </div> 223 <div class="overflow b5"></div> 224 <div class="overflow b6"></div> 225 </div> 226 </div> 227 <p class="following f1"> 228 </p> 229 <div class="container"> 230 <div class="overflow c1"></div> 231 <div class="overflow c2"></div> 232 <div class="overflow c3"></div> 233 <div class="overflow c4"></div> 234 </div> 235 <div class="following f2"></div> 236 </div> 237 <div id="redline"></div> 238 </body> 239 </html>