Untitled

dabblet.css

* {
margin: 0; padding: 0;
}

.wrap {
width: 500px;
margin: 0 auto;
position: relative;
}

header {
background: gray;
width: 500px;
height: 30px;
position: fixed;
top: 0;
}

main {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
}

section {
	background: lightblue;
	width: 400px;
	pposition: absolute;
	margin-left: 50px;
	float: left;
}

aside {
	width: 50px;
	background: lightgreen;
	position: fixed;
}

.left {

}
.right {
	margin-left: 450px;
}

dabblet.html

<div class="wrap">
	<header>***</header>
	
	<main>
		<aside class="left"><p style="
    border: 1px dotted red;
    height: 1000px;
    width: 10px;
    margin: 10px;
">abc</p></aside>
		<section><p style="
    border: 1px dotted red;
    height: 1000px;
    width: 10px;
    margin: 10px;
">DEF</p></section>
		<aside class="right"><p style="
    border: 1px dotted red;
    height: 1000px;
    width: 10px;
    margin: 10px;
">ghi</p></aside>
	</main>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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