multicol-dynamic-add-004-ref.html (570B)
1 <!DOCTYPE html> 2 <title>CSS Multi-column Layout Reference: Block with floating pseudo-elements in multi-column context</title> 3 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 4 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 5 6 <style> 7 .columns { 8 columns: 2; 9 column-fill: auto; 10 width: 100px; 11 height: 10px; 12 } 13 #container::before, #container::after { 14 float: left; 15 content: ""; 16 width: 10px; 17 height: 20px; 18 } 19 nav { 20 float: left; 21 } 22 </style> 23 24 <div class="columns"> 25 <div id="container"> 26 <nav>text</nav> 27 </div> 28 </div>