custom layout

dabblet.css

html, body {
    height:100%;
    margin:0;
    padding:0;
}
.content {
    display:table;
    width:100%;
    border-spacing:5px;
    border-collapse:separate;
    background:#CCD;
    height:100%;
    padding:40px 0;
    margin:-40px 0;
}
.Col1 {
    display:table-cell;
    border-radius:5px;
    background:#fff;
    width:25%;
}
#logo {
    display:table-cell;
    width:15%;
    height:100%;
}
.Col2 {
    display:table-cell;
    border-radius:5px;
    background:#fff;
    width:75%;
}
.imglogo {
    max-width:100%;
    max-height:100%;
}
#header {
    height:70px;
    position:relative;
    z-index:1;
}
#type {
    margin-left:auto;
    margin-right:auto;
    margin:5px;
}
#footer {
    height:40px;
    background:#2F7;
    position:relative;
    z-index:1;
}
/**
 * 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;
	}
	
	.info1 {
		width: 20%;
		float: left;
	}
	
	.info2 {
		width: 40%;
		float: center;
	}
	.info3 {
		width: 40%;
		float: right;
	}

dabblet.html

<div id="header"><div id="header">
			<div id="info-wrap">
				<div class="info1">LOGO</div>
				<div class="info2">header stuff</div>
				<div class="info3"><!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51bb27327693bbec"></script>
<!-- AddThis Button END --></div>
	</div></div>


</div>
<div class="content">
    <div id="left" class="Col1">
        <select id="type">
            <option value="Music">Music</option>
            <option value="Money">Money</option>
            <option value="Cars">Cars</option>
            <option value="Pets">Pets</option>
        </select>
        <br/>
        <input placeholder="search" style="margin:5px" />
        <br/>
    </div>
    <div id="center" class="Col2"></div>
</div>
<div id="footer"></div>

dabblet.js

// alert('Hello world!');

settings.json

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