multicol-breaking-nobackground-005-ref.html (1542B)
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: 200px; 11 width: 800px; 12 background: rgba(0, 0, 255, 0.3); 13 position: relative; 14 } 15 16 .innerbg { 17 height: 100px; 18 width: 256px; 19 background: rgba(255, 0, 255, 0.3); 20 position: absolute; 21 top: 0; 22 } 23 24 .inner { 25 height: 100px; 26 width: 120px; 27 font: 16px/1.25 sans-serif; 28 position: absolute; 29 top: 0; 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: 129px"> 52 FFFFF<br> 53 GGGGG<br> 54 HHHHH<br> 55 IIIII<br> 56 JJJJJ 57 </div> 58 <div class="inner lefthalf" style="left: 272px"> 59 KKKKK<br> 60 LLLLL<br> 61 MMMMM<br> 62 NNNNN<br> 63 OOOOO 64 </div> 65 <div class="inner righthalf" style="left: 401px"> 66 PPPPP<br> 67 QQQQQ<br> 68 RRRRR<br> 69 SSSSS<br> 70 TTTTT 71 </div> 72 <div class="inner lefthalf" style="left: 544px"> 73 UUUUU<br> 74 VVVVV<br> 75 WWWWW<br> 76 XXXXX<br> 77 YYYYY 78 </div> 79 <div class="inner righthalf" style="left: 673px"> 80 ZZZZZ<br> 81 aaaaa<br> 82 bbbbb<br> 83 ccccc<br> 84 ddddd 85 </div> 86 </div>