multicol-fill-auto-block-children-001.xht (1729B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>multicol | column-span: all | column-fill: auto</title> 6 <link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> 7 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/> 8 <link rel="match" href="multicol-fill-auto-block-children-ref.xht"/> 9 <style type="text/css"><![CDATA[ 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>filler 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>filler 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>filler 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>filler 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>