tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

multicol-breaking-005-ref.html (1986B)

      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 .blueborders {
     17  position: absolute;
     18  top: 0;
     19  left: 262px; /* 256px first column + (16px gap - 4px rule) / 2 */
     20  width: 268px; /* 256px second column + (16px gap - 4px rule) */
     21  height: 200px;
     22  border-right: blue solid 4px;
     23  border-left: blue solid 4px;
     24 }
     25 
     26 .innerbg {
     27  height: 100px;
     28  width: 256px;
     29  background: rgba(255, 0, 255, 0.3);
     30  position: absolute;
     31  top: 0;
     32 }
     33 
     34 .inner {
     35  height: 100px;
     36  width: 120px;
     37  font: 16px/1.25 sans-serif;
     38  position: absolute;
     39  top: 0;
     40 }
     41 
     42 .lefthalf {
     43  border-right: 2px solid fuchsia;
     44  padding-right: 7px;
     45 }
     46 
     47 .righthalf {
     48  padding-left: 7px;
     49 }
     50 
     51 </style>
     52 
     53 <div class="outer">
     54  <div class="blueborders"></div>
     55  <div class="innerbg" style="left: 0"></div>
     56  <div class="inner lefthalf" style="left: 0">
     57    AAAAA<br>
     58    BBBBB<br>
     59    CCCCC<br>
     60    DDDDD<br>
     61    EEEEE
     62  </div>
     63  <div class="inner righthalf" style="left: 129px">
     64    FFFFF<br>
     65    GGGGG<br>
     66    HHHHH<br>
     67    IIIII<br>
     68    JJJJJ
     69  </div>
     70  <div class="innerbg" style="left: 272px"></div>
     71  <div class="inner lefthalf" style="left: 272px">
     72    KKKKK<br>
     73    LLLLL<br>
     74    MMMMM<br>
     75    NNNNN<br>
     76    OOOOO
     77  </div>
     78  <div class="inner righthalf" style="left: 401px">
     79    PPPPP<br>
     80    QQQQQ<br>
     81    RRRRR<br>
     82    SSSSS<br>
     83    TTTTT
     84  </div>
     85  <div class="innerbg" style="left: 544px"></div>
     86  <div class="inner lefthalf" style="left: 544px">
     87    UUUUU<br>
     88    VVVVV<br>
     89    WWWWW<br>
     90    XXXXX<br>
     91    YYYYY
     92  </div>
     93  <div class="inner righthalf" style="left: 673px">
     94    ZZZZZ<br>
     95    aaaaa<br>
     96    bbbbb<br>
     97    ccccc<br>
     98    ddddd
     99  </div>
    100 </div>