columns test

dabblet.css

/**
 * columns test
 */
body {
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; margin: 0 auto; }
#container3 { float:left; width:100%; background:green; overflow:hidden; position:relative; }
#container2 { float:left; width:100%; background:yellow; position:relative; right:220px; }
#container1 { float:left; width:100%; background:red; position:relative; right: 550px; }
#col1 { float:left; width:220px; position:relative; left:770px; }
#col2 { float:left; width:55%; position:relative; left:78%; }
#col3 { float:left; width:220px; position:relative; left:790px; }

dabblet.html

<div id="wrapper">
  <div id="container3">
    <div id="container2">
      <div id="container1">
        <div id="col1">Column 1
          <p> oh man oh amn.</p>
          <p>I am so mother flippin nervous.</p>
          <p>i need content to keep moving and hopefully overflow.
        </div>
        <div id="col2">Column 2</div>
        <div id="col3">Column 3
          <p>oh my gosh so nervous.</p>
          <p>you know me... so nervous.</p>
          <p>but at least this works.</p>
        </div>
      </div>
    </div>
  </div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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