column-balancing-nested-001.html (1337B)
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-fill: auto; 30 } 31 .fixed-height { 32 height:3em; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="colset"> 38 <p>one one one one one</p> 39 <div class="colset non-balancing lvl2"> 40 <p>two two two two two</p> 41 </div> 42 </div> 43 <br> 44 <div class="colset"> 45 <p>one one one one one<br>one</p> 46 <div class="colset fixed-height lvl2"> 47 <p>two two two two two</p> 48 </div> 49 </div> 50 <br> 51 <div class="colset"> 52 <p>one<br>one</p> 53 <div class="colset lvl2"> 54 <p>two</p> 55 <div class="colset fixed-height lvl3"> 56 <p>three three three three three three</p> 57 </div> 58 </div> 59 </div> 60 </body> 61 </html>