multicol-breaking-006-ref.html (1775B)
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: 100px; 11 width: 800px; 12 background: rgba(0, 0, 255, 0.3); 13 position: relative; 14 } 15 16 .blueborders { 17 position: absolute; 18 top: 0; 19 left: 194px; /* 188px first column + (16px gap - 4px rule) / 2 */ 20 width: 200px; /* 188px second column + (16px gap - 4px rule) */ 21 height: 100px; 22 border-left: blue solid 4px; 23 } 24 25 .innerbg { 26 height: 100px; 27 width: 188px; 28 background: rgba(255, 0, 255, 0.3); 29 position: absolute; 30 top: 0; 31 } 32 33 .inner { 34 height: 100px; 35 width: 86px; 36 font: 16px/1.25 sans-serif; 37 position: absolute; 38 top: 0; 39 } 40 41 .lefthalf { 42 border-right: 2px solid fuchsia; 43 padding-right: 7px; 44 } 45 46 .righthalf { 47 padding-left: 7px; 48 } 49 50 .border-bottom { 51 height: 20px; 52 width: 188px; 53 background: green; 54 position: absolute; 55 top: 80px; 56 } 57 58 </style> 59 60 <div class="outer"> 61 <div class="blueborders"></div> 62 <div class="innerbg" style="left: 0"></div> 63 <div class="inner lefthalf" style="left: 0"> 64 AAAAA<br> 65 BBBBB<br> 66 CCCCC<br> 67 DDDDD<br> 68 EEEEE 69 </div> 70 <div class="inner righthalf" style="left: 95px"> 71 FFFFF<br> 72 GGGGG<br> 73 HHHHH<br> 74 IIIII<br> 75 JJJJJ 76 </div> 77 <div class="innerbg" style="left: 204px"></div> 78 <div class="inner lefthalf" style="left: 204px"> 79 KKKKK<br> 80 LLLLL<br> 81 MMMMM<br> 82 NNNNN 83 </div> 84 <div class="inner righthalf" style="left: 299px"> 85 OOOOO<br> 86 PPPPP<br> 87 QQQQQ<br> 88 </div> 89 <div class="border-bottom" style="left: 204px"></div> 90 </div>