column-balancing-nested-000.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  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-size:16px; padding:0; margin:0;
  13. }
  14. .colset {
  15. -moz-column-count: 2;
  16. -moz-column-gap: 1px;
  17. -moz-column-rule: 1px solid black;
  18. border: solid silver;
  19. margin-bottom:1em;
  20. width:30ch;
  21. }
  22. p { margin: 0; }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="colset">
  27. <p>one one one one one</p>
  28. <div class="colset">
  29. <p>two two two two two</p>
  30. </div>
  31. </div>
  32. <div class="colset">
  33. <p>one one one one one</p>
  34. <div class="colset">
  35. <p>two two two two two</p>
  36. <div class="colset">
  37. <p>three three three three three</p>
  38. </div>
  39. </div>
  40. </div>
  41. <div class="colset">
  42. <p>one one one one one</p>
  43. <div class="colset">
  44. <p>two two two two two</p>
  45. <div class="colset">
  46. <p>three three</p>
  47. <div class="colset">
  48. <p>four four four four four</p>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </body>
  54. </html>