1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>multicolumn | column-rule</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/#column-gaps-and-rules">
7 <link rel="match" href="reference/multicol-rule-ref.htm">
8 <meta name="flags" content="ahem">
9 <style type="text/css">
10 body {
11 margin: 0;
12 }
13 body>div {
14 font-family: ahem;
15 font-size: 1em;
16 line-height: 1em;
17 color: black;
18 background: yellow;
19 margin: 1em;
20 border: 1em solid gray;
21 width: 15em;
22 orphans: 1;
23 widows: 1;
24
25 column-count: 4;
26 column-gap: 1em;
27 column-rule-color: blue;
28 column-rule-width: 16px;
29 column-rule-style: solid;
30 }
31 span {
32 background: blue;
33 position: absolute;
34 top: 0;
35 left: 3em;
36 height: 2em;
37 width: 16px;
38 }
39 span+span {
40 left: 7em;
41 }
42 span+span+span {
43 left: 11em;
44 }
45 </style>
46 </head>
47
48 <body>
49
50 <div id="one">
51 xx xx
52 xx xx
53 xx xx
54 xx xx
55 </div>
56
57 </body>
58 </html>