| <!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="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> |
