custom layout

dabblet.css

/**
 * custom layout
 */

	
	/* colors */
	#header,
	#footer {
		background-color: #f1f1f1;
	}
	
	#main-wrap {
		background-color: #D9D9D9;
	}
	
	#sidebar {
		background-color: #d2d2d2;
	}
	
	#content-wrap {
		background-color: #c5c5c5;
	}
	
	.info {
		background-color: #DDD;
	}
	.info + .info {
		background-color: #e6e6e6
	}
	
	
	/* sizes */
	#main-wrap > div {
		min-height: 450px;
	}
	
	
	#header,
	#footer {
		min-height: 40px;
	}
	
	.info {
		min-height: 80px;
	}
	
	/* layout */
	
	#main-wrap {
		/* overflow to handle inner floating block */
		overflow: hidden;
	}
	
	#sidebar {
		float: left;
		width: 30%;
	}
	
	#content-wrap {
		float: right;
		width: 70%;
	}
	
	#info-wrap {
		/* overflow to handle inner floating block */
		overflow: hidden;
	}
	
	.info {
		width: 50%;
		float: left;
	}
	

dabblet.html

	<div id="header">Header</div>
	<div id="main-wrap">
		<div id="sidebar">Left Nav</div>
		<div id="content-wrap">
			<div id="info-wrap">
				<div class="info">small info </div>
				<div class="info">small info</div>
			</div>
			Content
		</div>
	</div>
	<div id="footer">Footer</div>

settings.json

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