Untitled

dabblet.css

#p {
  display: inline-block;
}
#p:after {
  display: table;
  clear: both;
  content: '';
}

#mi {
  background: #fee; }
#a1i {
  background: #eef; }
#a2i {
  background: #efe; }

#mw {
  float: left;
  width: 100%; }
#m {
  margin: 0 250px; }

#as {
  display: inline; }
#a1 {
  float: left;
  margin-left: -100%;
  width: 250px; }
#a2 {
  float: right;
  margin-left: -100%;
  *margin-left: -250px;
  width: 250px; }


#h, #f {
  background: #ffe;
  padding: 10px;
  text-align: center; }
#h {
  margin-bottom: 10px; }
#f {
  margin-top: 10px; }

dabblet.html

<div id=h>
here is the header
</div>

<div id=p>

  <div id=mw>
    <div id=m>
      <div id=mi>
        Main. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
      </div>
    </div>
  </div>

  <div id=as>

    <div id=a1>
      <div id=a1i>
	Aside 1. Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
      </div>
    </div>

    <div id=a2>
      <div id=a2i>
        Aside 2. Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.
      </div>
    </div>

  </div>

</div>

<div id=f>
here is the footer
</div>

settings.json

{"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}