abspos-overflow-01-cols.ref.xhtml (2087B)
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 .following { 14 margin: 0; 15 font-size: 10pt; 16 line-height: 10pt; 17 font-family: sans-serif; 18 text-align: center; 19 width: 100pt; 20 } 21 #colset { 22 width: 300pt; 23 height: 2in; 24 border: silver 2pt; 25 border-style: none solid; 26 } 27 #redline { 28 width: 303pt; 29 border-top: 4px solid lime; 30 margin-top: -1in; 31 position: relative; 32 z-index: -1; 33 } 34 </style> 35 </head> 36 <body> 37 <div id="colset"> 38 <div> 39 <div class="ocontainer"> 40 <div class="overflow o1"></div> 41 </div> 42 <div class="container"> 43 <div class="overflow a1"></div> 44 <div class="overflow a2"></div> 45 <div class="overflow a3"></div> 46 <div class="overflow a4"></div> 47 </div> 48 <div class="container"> 49 <div class="overflow b1"></div> 50 <div class="overflow b2"></div> 51 <div class="overflow b3"></div> 52 <div class="overflow b4"> 53 <div class="overflow child1"></div> 54 <div class="overflow child2"></div> 55 </div> 56 <div class="overflow b5"></div> 57 <div class="overflow b6"></div> 58 </div> 59 </div> 60 <p class="following f1"> 61 There must be a single green line and no red. 62 </p> 63 <div class="container"> 64 <div class="overflow c1"></div> 65 <div class="overflow c2"></div> 66 <div class="overflow c3"></div> 67 <div class="overflow c4"></div> 68 </div> 69 <div class="following f2"></div> 70 </div> 71 <div id="redline"></div> 72 </body> 73 </html>