Fri, 16 Jan 2015 18:13:44 +0100
Integrate suggestion from review to improve consistency with existing code.
1 <!--
2 Any copyright is dedicated to the Public Domain.
3 http://creativecommons.org/licenses/publicdomain/
4 -->
5 <!DOCTYPE html>
6 <html lang="en-US">
7 <head>
8 <title>Testing nested balancing column sets</title>
9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=822053">
10 <style type="text/css">
11 html,body {
12 color:black; background-color:white; font-family:monospace; font-size:16px; padding:0; margin:0;
13 }
15 .colset {
16 -moz-column-count: 2;
17 -moz-column-gap: 0px;
18 -moz-column-rule: 1px solid black;
19 margin-bottom:1em;
20 width:30ch;
21 }
22 .colset.lvl2 {
23 -moz-column-rule: 1px solid blue;
24 }
25 .colset.lvl3 {
26 -moz-column-rule: 1px solid red;
27 }
28 p { margin: 0; }
29 .non-balancing {
30 -moz-column-count: 1;
31 }
32 .fixed-height.lvl2 {
33 -moz-column-count: 2;
34 }
35 .fixed-height {
36 -moz-column-count: 1;
37 height:3em;
38 }
39 </style>
40 </head>
41 <body>
42 <div class="colset">
43 <p>one one one one one</p>
44 <div class="colset non-balancing lvl2">
45 <p>two two two two<br>two</p>
46 </div>
47 </div>
48 <div class="colset">
49 <p>one one one one one<br>one</p>
50 <div class="colset fixed-height lvl2">
51 <p>two two two two two</p>
52 </div>
53 </div>
54 <div class="colset">
55 <p>one<br>one</p>
56 <div class="colset lvl2">
57 <p>two</p>
58 <div class="colset fixed-height lvl3">
59 <p>three three three three three three</p>
60 </div>
61 </div>
62 </div>
63 </body>
64 </html>