html-css column layouts

dabblet.css

/**
 * html-css column layouts
 */
html { background: #f06; background: linear-gradient(45deg, #f06, yellow);
min-height: 100%; }
div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.container { display: block; position: relative; max-width: 1000px; min-width: 550px; margin: 0 auto; }

#left { width: 220px; background:#c9c; position: absolute; left: 0; top: 0; height: 100%; }
#content { width: 100%; background: #fff; padding: 0px 220px; }
#right { width: 220px; background: #a4a; position: absolute; right: 0; top: 0; height: 100%; }

dabblet.html

<div class="container">
  <div id="left">
    left col.
  </div>
  
  <div id="content"> <h1>here is some main text.</h1>
  <p>here is a brief paragraph with some elongated text. we can see if it will break the lines and where the columns begin to appear.</p>
  
  <p>Isn't this a neat little trick???</p>
  </div>
  
  <div id="right">
    right col.
  </div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}