multicol-breaking-nobackground-004-ref.html (1406B)
1 <!DOCTYPE HTML> 2 <title>CSS Test Reference: breaking of a multicolumn</title> 3 <meta charset="utf-8"> 4 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="https://mozilla.org/"> 7 <style> 8 9 .outer { 10 height: 125px; 11 width: 800px; 12 background: rgba(0, 0, 255, 0.3); 13 position: relative; 14 } 15 16 .inner { 17 height: 100px; 18 width: 86px; 19 font: 16px/1.25 sans-serif; 20 position: absolute; 21 top: 0; 22 } 23 24 .border-bottom { 25 height: 25px; 26 width: 188px; 27 background: green; 28 position: absolute; 29 top: 100px; 30 } 31 32 .lefthalf { 33 border-right: 2px solid fuchsia; 34 padding-right: 7px; 35 } 36 37 .righthalf { 38 padding-left: 7px; 39 } 40 41 </style> 42 43 <div class="outer"> 44 <div class="inner lefthalf" style="left: 0"> 45 AAAAA<br> 46 BBBBB<br> 47 CCCCC<br> 48 DDDDD<br> 49 EEEEE 50 </div> 51 <div class="inner righthalf" style="left: 95px"> 52 FFFFF<br> 53 GGGGG<br> 54 HHHHH<br> 55 IIIII<br> 56 JJJJJ 57 </div> 58 <div class="border-bottom" style="left: 0"></div> 59 <div class="inner lefthalf" style="left: 204px"> 60 KKKKK<br> 61 LLLLL<br> 62 MMMMM<br> 63 NNNNN 64 </div> 65 <div class="inner righthalf" style="left: 299px"> 66 OOOOO<br> 67 PPPPP<br> 68 QQQQQ<br> 69 </div> 70 <div class="border-bottom" style="left: 204px;"></div> 71 <div class="border-bottom" style="left: 408px"></div> 72 </div>