1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>multicol | column-span: all | column-fill: auto</title>
5 <link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
6 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns">
7 <link rel="match" href="reference/multicol-fill-auto-block-children-ref.htm">
8 <meta name="flags" content="">
9 <style type="text/css">
10 html {
11 background: white;
12 }
13 body {
14 background: blue;
15 width: 1200px;
16 height: 492px;
17 column-count: 3;
18 column-gap: 2em;
19 column-fill: auto;
20 }
21 h1 {
22 column-span: all;
23 font-size: 2em;
24 height: 70px;
25 }
26 dl {
27 font-size: 70%;
28 color: blue;
29 padding: 5px 10px 3px;
30 margin: 0 0 15px;
31 border: 2px solid blue;
32 height: 72px;
33 }
34 dt {
35 font-weight: bold;
36 font-style: normal;
37 width: 47%;
38 height: 100%;
39 float: left;
40 }
41 dd {
42 line-height: 120%;
43 padding: 0;
44 margin: 0 0 5px 47%;
45 width: 50%;
46 }
47 </style>
48 </head>
49
50 <body>
51 <h1>you should not see the word fail</h1>
52
53 <dl>
54 <dt>block1</dt>
55 <dd>block1 block1</dd>
56 <dd>block1 block1</dd>
57 <dd>block1 block1 block1</dd>
58 <dd>damer block1 block1</dd>
59 </dl>
60
61 <dl>
62 <dt>block2</dt>
63 <dd>block2 block2</dd>
64 <dd>block2 block2</dd>
65 <dd>block2 block2 block2</dd>
66 <dd>damer block2 block2</dd>
67 </dl>
68
69 <dl>
70 <dt>block3</dt>
71 <dd>block3 block3</dd>
72 <dd>block3 block3</dd>
73 <dd>block3 block3 block3</dd>
74 <dd>damer block3 block3</dd>
75 </dl>
76
77 <dl>
78 <dt>block4</dt>
79 <dd>block4 block4</dd>
80 <dd>block4 block4</dd>
81 <dd>block4 block4 block4</dd>
82 <dd>damer block4 block4</dd>
83 </dl>
84
85 <dl>
86 <dt>fail</dt>
87 <dd>fail fail</dd>
88 <dd>fail fail</dd>
89 <dd>fail fail fail</dd>
90 <dd>fail fail fail</dd>
91 </dl>
92 </body>
93 </html>