Untitled

dabblet.css

* {
	margin: 0;
	padding: 0;
	position: relative;
	box-sizing: border-box;
	}
	
html {
	background-color: grey;
	}

.container {
	text-align: center;
	}
	
.main-col, .right-col {
	display: inline-block;
	vertical-align: top;
	text-align: left;
	margin-right: -4px; /* css-tricks.com/fighting-the-space-between-inline-block-elements/‎ */
	}
	
.main-col {	
	width: 50%; /* whatever you want it to be but keep in mind that this + right-col's width sums up the container's width so if you give this 60% width and right-col 50%, you'll have to deal with horizontal scrollbars */
	margin-left: 20%;/* equal to right-col's width */	
	
	/*demo purposes*/
	background-color: white;
	border: 3px dashed;
	min-height: 600px;
	}

.right-col {
	width: 20%;
	
	/* demo purposes */
	background: dodgerblue;
	min-height: 300px;
	}

dabblet.html

<div class='container'>
	<div class='main-col'></div>
	<div class='right-col'></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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