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; }

#wrapper { max-width: 1000px; min-width:750px; margin: 0 auto; }
.container { height: 100%; float: left; background: #fff; }

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

.container {
    display: inline-block;
}
.container:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
.container {
    display: block;
}

dabblet.html

<div id="wrapper">
<div class="container">
  <div id="right">
    right col.
    <p>here is a line.</p>
    <p> and nother</p>
    <p> and nother!!</p>
    <p> gonna keep going.</p>
    <p>heyoo</p>
    <p>heyooooo</p>
  </div>
  
  <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>
  <h2>here is more big text and will this break the bank?? will it?? i dont really know to be honest.</h2>
  <p>but let's find out folks.</p>
  <p>Isn't this a neat little trick???</p>
  </div>
</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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