Untitled

dabblet.css

#box1 {
	background-color: blue;
	height: 100px;
	margin: 0;
	width: 100px;
	position: absolute;
	top: 0;
	left: 0;
}

#box2 {
	background-color: yellow;
	height: 100px;
	margin: 0;
	width: 100px;
	position: absolute;
	bottom: 0;
	right: 0;
	
}

#box3 {
	background-color: red;
	height: 100px;
	margin: 0;
	width: 100px;
	position: absolute;
	bottom: 0;
	left: 0;
}

#box4 {
	background-color: green;
	height: 100px;
	margin: 0;
	width: 100px;
	position: absolute;
	top: 0;
	right: 0;
}

#box5 {
	background-color: pink;
	height: 20px;
	margin: 0;
	width: 20px;
	position: absolute;
	top: 40px;
	right: 40px;
}

#box6 {
	background-color: black;
	height: 20px;
	margin: 0;
	width: 20px;
	position: absolute;
	top: 40px;
	right: 40px;
}

#box7 {
	background-color: green;
	height: 20px;
	margin: 0;
	width: 20px;
	position: absolute;
	top: 40px;
	right: 40px;
}

#box8 {
	background-color: white;
	height: 20px;
	margin: 0;
	width: 20px;
	position: absolute;
	top: 40px;
	right: 40px;
}

dabblet.html

<div id="box1">
	<div id="box5"></div>
</div>
<div id="box2">
	<div id="box6"></div>
</div>
<div id="box3">
	<div id="box7"></div>
</div>
<div id="box4">
	<div id="box8"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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