379349-2a.xhtml (1992B)
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>CSS3 Multi-column Layout Test Suite: Overflow Pagination (Interlaced [Simplified])</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 body, html { 10 margin: 0; 11 padding: 0; 12 } 13 .container { 14 height: .5in; 15 } 16 .overflow { 17 border-bottom: solid 4px red; 18 } 19 .following { 20 margin: 0 0 .5in; 21 height: .5in; 22 background: white; 23 24 font-size: 10pt; 25 line-height: 10pt; 26 color: navy; 27 } 28 .fno1 { 29 margin: 0; 30 border-top: 4px solid blue; 31 } 32 .no1 .overflow { 33 height: 800%; 34 } 35 .no2 .overflow { 36 height: 1200%; 37 } 38 .no3 .overflow { 39 height: 600%; 40 border-bottom-color: blue; 41 } 42 .no4 .overflow { 43 height: 800%; 44 border-bottom-color: blue; 45 } 46 body { 47 height: 2.5in; 48 width: 300pt; 49 column-width: 100pt; 50 column-gap: 0; 51 column-fill: auto; 52 border: solid gray; 53 } 54 </style> 55 </head> 56 <body> 57 <div class="container no1"> 58 <div class="overflow"> 59 </div> 60 </div> 61 <div class="container no2"> 62 <div class="overflow"> 63 </div> 64 </div> 65 <div class="container no3"> 66 <div class="overflow"> 67 </div> 68 </div> 69 <div class="following"> 70 <p class="fno1"> 71 This paragraph must be in the first column. 72 There must be no red on any page. 73 </p> 74 </div> 75 <div class="container no4"> 76 <div class="overflow"> 77 </div> 78 </div> 79 <p class="following"> 80 This paragraph must be in the second column. 81 There must be an unbroken blue line across 82 all three columns. 83 </p> 84 </body> 85 </html>