column-balancing-nested-001-ref.html (1407B)
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 } 14 15 .colset { 16 column-count: 2; 17 column-gap: 0px; 18 column-rule: 1px solid black; 19 width:30ch; 20 } 21 .colset.lvl2 { 22 column-rule: 1px solid blue; 23 } 24 .colset.lvl3 { 25 column-rule: 1px solid red; 26 } 27 p { margin: 0; } 28 .non-balancing { 29 column-count: 1; 30 } 31 .fixed-height.lvl2 { 32 column-count: 2; 33 } 34 .fixed-height { 35 column-count: 1; 36 height:3em; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="colset"> 42 <p>one one one one one</p> 43 <div class="colset non-balancing lvl2"> 44 <p>two two two two<br>two</p> 45 </div> 46 </div> 47 <br> 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 <br> 55 <div class="colset"> 56 <p>one<br>one</p> 57 <div class="colset lvl2"> 58 <p>two</p> 59 <div class="colset fixed-height lvl3"> 60 <p>three three three three three three</p> 61 </div> 62 </div> 63 </div> 64 </body> 65 </html>