floats-clear-multicol-000-ref.html (931B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <title>CSS Float Test Reference: Test the clear position after the floating elements breaking across multi-columns</title> 3 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> 4 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 5 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 6 7 <style type="text/css"> 8 .multicol { 9 margin: 1em; 10 border: solid silver; 11 width: 300px; 12 column-width: 100px; 13 column-gap: 0; 14 column-fill: auto; 15 height: 100px; 16 } 17 18 .container { 19 border: 15px aqua; 20 border-style: none solid; 21 height: 250px; 22 } 23 .clear { 24 border-bottom: solid orange; 25 background: red; 26 } 27 </style> 28 29 <p>The orange line should be halfway down the third column 30 (immediately after the end of the aqua lines). 31 32 <div class="multicol"> 33 <div class="container"> 34 </div> 35 <div class="clear"> 36 </div> 37 </div>