multicol-width-003

column-width (basic)

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
ahem

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3  <head>
 4   <title>CSS Multi-column Layout Test: column-width (basic)</title>
 5   <link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
 6   <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-23 -->
 7   <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns">
 8   <link rel="match" href="reference/multicol-width-002-ref.htm">
 9   <meta name="flags" content="ahem">
10   <style type="text/css">
11   div#multi-column
12   {
13   background-color: yellow;
14   border: gray solid 1em;
15   color: black;
16   font: 1.25em/1 Ahem;
17   height: 2em;
18   orphans: 1;
19   position: relative;
20   widows: 1;
21   width: 12em;
22 
23   column-width: 6em;
24   column-gap: 0;
25   }
26 
27   div > div
28   {
29   background-color: black;
30   height: 2em;
31   position: absolute;
32   top: 0;
33   width: 2em;
34   }
35 
36   div#s2 {left: 3em;}
37 
38   div#s3
39   {
40   background-color: blue;
41   left: 6em;
42   }
43 
44   div#s4
45   {
46   background-color: blue;
47   left: 9em;
48   }
49   </style>
50  </head>
51  <body>
52 
53   <div id="multi-column">
54     <div></div>
55     <div id="s2"></div>
56     <div id="s3"></div>
57     <div id="s4"></div>
58   </div>
59 
60  </body>
61 </html>