Float

dabblet.css

/**
 * Float
 */

body{
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	position: relative;
}

header{
	background: #eee;
}

#content{
	float: left;
	width: 45%;
	margin-right: 5%;
	clear:both;
	left: 50%;
	position: relative;
}

.floats{
	background: lightgreen;
	position: relative;
	left: -50%;
}
#sidebar{

	padding-left: 5px;
	float: left;
	background: #999;
	width: calc(30% - 5px);
}

footer{
	float:left;
	background: dodgerblue;
	clear: both;
	display: inline;
}

dabblet.html

<div id="wrap">
	<header>
		<h1>Header</h1>
	</header>
	<div id="content">
		<ul class="floats">
			<li>123</li>
			<li>342</li>
		</ul>
	</div>
	<div id="sidebar">
		sidebar
	</div>
	<footer>
		footer
	</footer>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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