tor-browser

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

fieldset-columns-001-ref.html (1271B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <body>
      4 <style>
      5 a {
      6  position: absolute;
      7  width: 10px;
      8  height: 10px;
      9  top: 0;
     10  left: 0;
     11  background: blue;
     12 }
     13 f {
     14  position: fixed;
     15  width: 10px;
     16  height: 10px;
     17  bottom: 0;
     18  left: 100px;
     19  background: lime;
     20 }
     21 fieldset div {
     22  columns: 2;
     23  column-fill: auto;
     24 }
     25 fieldset {
     26  border: 1px solid;
     27 }
     28 .rel {
     29  position: relative;
     30 }
     31 </style>
     32 <fieldset class="rel" style="overflow:hidden; width:300px; height:200px;">
     33  <legend>Legend</legend>
     34 <div style="columns: 2; width:100%; height:100%;">
     35  <p>X
     36  <p>X
     37  <p>X
     38  <p>X
     39  <p>X
     40  <p>X
     41  <p>X
     42  <p>X
     43  <p>X
     44  <p>X
     45  <p>X
     46  <p>X
     47  <p>X
     48  <p>X
     49  <p>X
     50  <p>X
     51 <a></a><f></f>
     52 </div>
     53 </fieldset>
     54 <fieldset class="rel" style="width:600px; height:7em; overflow:hidden">
     55  <legend>Legend</legend>
     56 <div style="columns: 3; column-gap:2em; column-rule:3px solid; column-width:3em; width:100%; height:100%">
     57  <p>X
     58  <p>X
     59  <p>X
     60  <p>X
     61  <p>X
     62  <p>X
     63 <a></a><f style="left:120px"></f>
     64 </div>
     65 </fieldset>
     66 <fieldset style="overflow:hidden; width:300px; height:2em;">
     67  <legend>Legend</legend>
     68 <div>
     69  <p>X
     70 <a></a><f style="left:140px"></f>
     71 </div>
     72 </fieldset>
     73 <fieldset style="width:600px; height:2em">
     74  <legend>Legend</legend>
     75 <div>
     76  <p>X
     77 <a></a><f style="left:160px"></f>
     78 </div>
     79 </fieldset>
     80 
     81 </body>
     82 </html>