|
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 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 #colset { |
|
14 position: relative; |
|
15 padding-top: 1px; |
|
16 width: 300pt; |
|
17 height: 2in; |
|
18 border: silver 2pt; |
|
19 border-style: none solid; |
|
20 } |
|
21 |
|
22 .centerline { |
|
23 margin: 0 auto; |
|
24 bottom: 0; |
|
25 position: absolute; |
|
26 width: 8px; |
|
27 background: aqua; |
|
28 } |
|
29 #c1 { |
|
30 height: 96pt; |
|
31 right: 200pt; |
|
32 left: 0; |
|
33 } |
|
34 #c2 { |
|
35 height: 120pt; |
|
36 right: 100pt; |
|
37 left: 100pt; |
|
38 } |
|
39 #c3 { |
|
40 height: 144pt; |
|
41 right: 0; |
|
42 left: 200pt; |
|
43 } |
|
44 |
|
45 #redline { |
|
46 border-top: 8px solid lime; |
|
47 margin-top: 1in; |
|
48 position: relative; |
|
49 } |
|
50 |
|
51 #dynamo { |
|
52 position: relative; |
|
53 margin: -8px auto -8px; |
|
54 width: 8px; |
|
55 border-top: 8px solid orange; |
|
56 } |
|
57 |
|
58 </style> |
|
59 </head> |
|
60 <body> |
|
61 <p>There must be a single green line with an orange square where |
|
62 it intersects with the middle aqua line, and no red. The following |
|
63 links must move the orange square to the intersection with the |
|
64 indicated aqua line:</p> |
|
65 <p> |
|
66 <a href="asdljlwjerlk-unvisited">Left</a> |
|
67 <a href="asdljlwjerlk-unvisited">Center</a> |
|
68 <a href="asdljlwjerlk-unvisited">Right</a> |
|
69 </p> |
|
70 <div id="colset"> |
|
71 <div class="centerline" id="c1"></div> |
|
72 <div class="centerline" id="c2"></div> |
|
73 <div class="centerline" id="c3"></div> |
|
74 <div id="redline"></div> |
|
75 <div id="dynamo"></div> |
|
76 </div> |
|
77 </body> |
|
78 </html> |