dual-sidebar fixed columns

dabblet.css

/**
 * dual-sidebar fixed columns
 */

html {
background: #f06;
background: #dbd18d;
min-height: 100%; }

body { padding-top: 85px; } 
#wrapper { margin: 0 auto; max-width: 1000px; min-width: 600px;  background: #fff; }

/* column container */	
.colmask {		
	position:relative;	/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */	
	clear:both;
	float:left;
	width:100%;
	overflow:hidden;
	margin-bottom: 50px;	
}
.blogstyle { background:#ff9; } 
.blogstyle .colmid { 
    float:left; 
    width:200%; 
    margin-left:-200px; /* Width of right column */
	position:relative; 
	right:100%; 
	background:#FFD8B7; /* Centre column background colour */    
}  
.blogstyle .colleft {
    float:left;
    width:100%;
    margin-left:-200px; /* Width of centre column */ 
	background:#fff; /* Left column background colour */    
}   
.blogstyle .col1wrap {    
	float:left;
	width:50%;	    
	padding-bottom:1em; /* Centre column bottom padding. Leave it out if it's zero */
}
.blogstyle .col1 { 
    margin:0 15px 0 415px; /* Centre column side padding:  	Left padding = left column width + centre column left padding width  -  Right padding = right column width + centre column right padding width */ 
	position:relative;
	left:100%;
	overflow:hidden;
}
 
.blogstyle .col3 { 
    float: right;
    width: 170px;  /* Width of right column content (right column width minus left and right padding) */ 
	position: relative;
	left: 195px; 
}

dabblet.html

<div id="wrapper">
  <div class="colmask blogstyle">    
    <div class="colmid">        

        <div class="col1wrap">                
          <div class="col1">					
          <!-- Column 1 start -->					
          <h2>Pixel dimensions of the blog style layout</h2>		
          <p>In this layout the center and right column widths are in pixels and the left page adjusts in size to fill the rest of the screen. Vertical dimensions are left unset so they automatically stretch to the height of the content. Layouts that use pixel widths are great for images because you can make them fit perfectly within a column without gaps.</p>				
          <p>And this is just another paragraph we can use...</p>
          <p>I feel we can see a lot of dummy content.
          <!-- Column 1 end -->                
          </div>
        </div>
        
        <div class="col3">
        <!-- Column 3 start --> 
        <h2>Full cross-browser support</h2>
        <p>Blah blah basic HTML code here. this looks like a really sick layout if you ask me.</p>
				
        <!-- Column 3 end -->
        </div>
      </div>

  </div>ff
</div>

dabblet.js

// alert('Hello world!');

settings.json

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