Untitled

dabblet.css

* { padding: 0; margin: 0; }
.header {
	height: 60px;
	background: grey;
}

.page {
	position: absolute;
	top: 60px;
	bottom: 0;
	left: 0; right: 0;
}

.sidebar {
	position: absolute;
	width: 100px;
	left: 0;
	top: 0;
	bottom: 0;
	background: lightgrey;
}

.content {
	position: absolute;
	left: 100px;
	right: 0;
	top: 0;
	bottom: 0;
}

.content-header {
	height: 40px;
	background: black;
}

.content-footer {
	height: 40px;
	background: darkgrey;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.actual-content {
	position: absolute;
	top: 40px;
	bottom: 40px;
	background: #eee;
	left: 0;
	right: 0;
}

dabblet.html

<div class="header"></div>
<div class="page">
	<div class="sidebar"></div>
	<div class="content">
		<div class="content-header"></div>
		<div class="actual-content"></div>
		<div class="content-footer"></div>
	</div>
</div>

settings.json

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