CSS Flexible Layout Module - extra div

dabblet.css

/**
 * CSS Flexible Layout Module - extra div
 */
body {
background: #bfbfbf;
min-height: 100%;
}
header {
	background-color: blue;
	min-height: 100px; 
}
aside {
	background-color: orange;
	width: 20%;
	min-height: 200px;
	float: left;
}
.mainContent {
	background-color: white;
	width: 60%;
	min-height: 200px;
	float: right;
}
.extraDiv {
	background-color: pink;
	width: 20%;
	min-height: 200px;
	float: left;
}
footer {
	background-color: green;
	width: 100%;
	clear: both;
	min-height: 100px; 
}

dabblet.html

<header role="banner">here is the header</header>
<div class="wrapper">
<div class="mainContent">Here is the main content</div>
<aside role="complementary">here is a sidebar, after the main content (although we want to make it appear before)</aside>
<div class="extraDiv">Oh Lord, now my head is starting to hurt!</div>
</div>
<footer role="contentInfo">here is the main footer</footer>

settings.json

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