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>
190