tor-browser

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

multicol-breaking-004-ref.html (1967B)

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