multicol-breaking-001-ref.html (1622B)
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="Mozilla" href="https://mozilla.org/"> 6 <style> 7 8 .outer { 9 height: 100px; 10 width: 800px; 11 background: rgba(0, 0, 255, 0.3); 12 position: relative; 13 } 14 15 .blueborders { 16 position: absolute; 17 top: 0; 18 left: 194px; /* 188px first column + (16px gap - 4px rule) / 2 */ 19 width: 200px; /* 188px second column + (16px gap - 4px rule) */ 20 height: 100px; 21 border-right: blue solid 4px; 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 </style> 51 52 <div class="outer"> 53 <div class="blueborders"></div> 54 <div class="innerbg" style="left: 0"></div> 55 <div class="inner lefthalf" style="left: 0"> 56 AAAAA<br> 57 BBBBB<br> 58 CCCCC<br> 59 DDDDD<br> 60 EEEEE 61 </div> 62 <div class="inner righthalf" style="left: 95px"> 63 FFFFF<br> 64 GGGGG<br> 65 HHHHH<br> 66 IIIII<br> 67 JJJJJ 68 </div> 69 <div class="innerbg" style="left: 204px"></div> 70 <div class="inner lefthalf" style="left: 204px"> 71 KKKKK<br> 72 LLLLL<br> 73 MMMMM<br> 74 NNNNN 75 </div> 76 <div class="inner righthalf" style="left: 299px"> 77 OOOOO<br> 78 PPPPP<br> 79 QQQQQ<br> 80 </div> 81 <div class="innerbg" style="left: 408px"></div> 82 </div>