|
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 |
|
14 .following { |
|
15 margin: 0 0 .5in; |
|
16 height: .5in; |
|
17 background: white; |
|
18 |
|
19 font-size: 10pt; |
|
20 line-height: 10pt; |
|
21 color: navy; |
|
22 } |
|
23 .fno1 { |
|
24 position: absolute; |
|
25 top: 1.5in; left: 0; |
|
26 width: 100pt; |
|
27 border-top: 4px solid blue; |
|
28 } |
|
29 .fno2 { |
|
30 position: absolute; |
|
31 top: .5in; left: 100pt; |
|
32 width: 100pt; |
|
33 } |
|
34 .overflow { |
|
35 height: 4in; |
|
36 width: 200pt; |
|
37 border-bottom: 4px solid blue; |
|
38 } |
|
39 body { |
|
40 height: 2.5in; |
|
41 width: 300pt; |
|
42 -moz-column-width: 100pt; |
|
43 -moz-column-gap: 0; |
|
44 -moz-column-fill: auto; |
|
45 border: solid gray; |
|
46 position: relative; |
|
47 } |
|
48 </style> |
|
49 </head> |
|
50 <body> |
|
51 <div class="overflow"> |
|
52 </div> |
|
53 <div class="following fno1"> |
|
54 This paragraph must be in the first column. |
|
55 There must be no red on any page. |
|
56 </div> |
|
57 <p class="following fno2"> |
|
58 This paragraph must be in the second column. |
|
59 There must be an unbroken blue line across |
|
60 all three columns. |
|
61 </p> |
|
62 </body> |
|
63 </html> |