<!DOCTYPE HTML> <title>CSS Test Reference: breaking of a multicolumn</title> <meta charset="utf-8"> <link rel="author" title="L. David Baron" href="https://dbaron.org/"> <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> <link rel="author" title="Mozilla" href="https://mozilla.org/"> <style> .outer { height: 200px; width: 800px; background: rgba(0, 0, 255, 0.3); position: relative; } .innerbg { height: 100px; width: 256px; background: rgba(255, 0, 255, 0.3); position: absolute; top: 0; } .inner { height: 100px; width: 120px; font: 16px/1.25 sans-serif; position: absolute; top: 0; } .lefthalf { border-right: 2px solid fuchsia; padding-right: 7px; } .righthalf { padding-left: 7px; } </style> <div class="outer"> <div class="inner lefthalf" style="left: 0"> AAAAA<br> BBBBB<br> CCCCC<br> DDDDD<br> EEEEE </div> <div class="inner righthalf" style="left: 129px"> FFFFF<br> GGGGG<br> HHHHH<br> IIIII<br> JJJJJ </div> <div class="inner lefthalf" style="left: 272px"> KKKKK<br> LLLLL<br> MMMMM<br> NNNNN<br> OOOOO </div> <div class="inner righthalf" style="left: 401px"> PPPPP<br> QQQQQ<br> RRRRR<br> SSSSS<br> TTTTT </div> <div class="inner lefthalf" style="left: 544px"> UUUUU<br> VVVVV<br> WWWWW<br> XXXXX<br> YYYYY </div> <div class="inner righthalf" style="left: 673px"> ZZZZZ<br> aaaaa<br> bbbbb<br> ccccc<br> ddddd </div> </div>