abspos-overflow-01-cols.xhtml (4261B)
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"> 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 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 4px solid; 21 top: 0; 22 } 23 .following { 24 font-size: 10pt; 25 line-height: 10pt; 26 font-family: sans-serif; 27 text-align: center; 28 position: relative; 29 background: white; 30 width: 100pt; 31 } 32 #colset { 33 width: 300pt; 34 height: 2in; 35 column-count: 3; 36 column-gap: 0; 37 column-fill: auto; 38 border: silver 2pt; 39 border-style: none solid; 40 } 41 #redline { 42 width: 303pt; 43 border-top: 4px solid red; 44 margin-top: -1in; 45 position: relative; 46 z-index: -1; 47 } 48 49 .ocontainer { 50 height: 0; 51 } 52 .o1 { /* 3rd col */ 53 height: 5in; 54 } 55 .a1 { /* 1st col */ 56 position: absolute; 57 height: 1in; 58 width: 33pt; 59 } 60 .a2 { /* 2nd col */ 61 position: absolute; 62 height: 3in; 63 width: 25pt; 64 margin-left: 25pt; 65 } 66 .a3 { /* 3rd col */ 67 position: absolute; 68 height: 5in; 69 margin-left: 10pt; 70 } 71 .a4 { /* 2nd col */ 72 width: 25pt; 73 height: 3in; 74 } 75 76 .b1 { /* 3rd col */ 77 position: absolute; 78 height: 336pt; 79 margin-left: 20pt; 80 } 81 .b2 { /* 2nd col */ 82 position: absolute; 83 height: 192pt; 84 width: 25pt; 85 margin-left: 50pt; 86 } 87 .b3 { /* 3rd col */ 88 position: absolute; 89 height: 336pt; 90 margin-left: 30pt; 91 } 92 .b4 { /* 1st col, but no border */ 93 position: absolute; 94 height: 48pt; 95 border-bottom: none; 96 } 97 .b4 .child1 { /* 1st col */ 98 position: absolute; 99 height: 100%; 100 width: 33pt; 101 margin-left: 33pt; 102 } 103 .b4 .child2 { /* 3rd col */ 104 height: 336pt; 105 margin-left: 40pt; 106 107 } 108 .b5 { /* 1st col */ 109 position: absolute; 110 height: 48pt; 111 width: 34pt; 112 margin-left: 66pt; 113 } 114 .b6 { /* 3rd col */ 115 height: 336pt; 116 margin-left: 50pt; 117 } 118 119 .c1 { /* 3rd col */ 120 position: absolute; 121 height: 3in; 122 margin-left: 60pt; 123 } 124 .c2 { /* 2nd col */ 125 position: absolute; 126 height: 1in; 127 width: 25pt; 128 margin-left: 75pt; 129 } 130 .c3 { /* 3rd col */ 131 position: absolute; 132 height: 3in; 133 margin-left: 70pt; 134 } 135 .c4 { /* 3rd col */ 136 height: 3in; 137 width: 20pt; 138 margin-left: 80pt; 139 } 140 141 .f1 { 142 margin-top: -48pt; 143 height: 48pt; 144 margin-bottom: 96pt; 145 } 146 .f2 { 147 margin-top: -24pt; 148 height: 24pt; 149 } 150 </style> 151 </head> 152 <body> 153 <div id="colset"> 154 <div> 155 <div class="ocontainer"> 156 <div class="overflow o1"></div> 157 </div> 158 <div class="container"> 159 <div class="overflow a1"></div> 160 <div class="overflow a2"></div> 161 <div class="overflow a3"></div> 162 <div class="overflow a4"></div> 163 </div> 164 <div class="container"> 165 <div class="overflow b1"></div> 166 <div class="overflow b2"></div> 167 <div class="overflow b3"></div> 168 <div class="overflow b4"> 169 <div class="overflow child1"></div> 170 <div class="overflow child2"></div> 171 </div> 172 <div class="overflow b5"></div> 173 <div class="overflow b6"></div> 174 </div> 175 </div> 176 <p class="following f1"> 177 There must be a single green line and no red. 178 </p> 179 <div class="container"> 180 <div class="overflow c1"></div> 181 <div class="overflow c2"></div> 182 <div class="overflow c3"></div> 183 <div class="overflow c4"></div> 184 </div> 185 <div class="following f2"></div> 186 </div> 187 <div id="redline"></div> 188 </body> 189 </html>