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