Flexbox

dabblet.css

/**
 * Flexbox
 */

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);

body {
	font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;

}

body > div {
	display: -webkit-flex;
	-webkit-flex-flow: row;
	padding: 1em;
	background-color: #3E2217;
}

div > div {
	width: 100%;
	padding: 20px;
}

/* http://www.colourlovers.com/palette/2327397/Four_Lines */
div > div:first-of-type {
	background-color: #F8B435;
	-webkit-flex: 1;
	-webkit-order: 1;
}

div > div:nth-of-type(2) {
	-webkit-order: 2;
	background-color: #F6EEE1;
	width: 30%;
}

div > div:last-of-type {
	background-color: #8EA148;
	width: 10%;
}

dabblet.html

<div>
	<div>
		<h1>Div #1</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit sapien, fringilla sed volutpat in, tincidunt ac turpis. Donec odio metus, cursus dictum placerat quis, eleifend pulvinar nunc. Donec et dui turpis. Proin in purus id massa dapibus porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sodales, augue in ultricies ornare, eros nulla condimentum ante, malesuada pulvinar nibh metus sit amet ante. Sed sollicitudin luctus sem a ornare. Proin nisl libero, iaculis ut ullamcorper et, semper ut nulla. Duis justo dolor, commodo non adipiscing vitae, tincidunt sit amet risus. Duis diam diam, congue vel faucibus non, imperdiet luctus mauris. Phasellus aliquam vestibulum ipsum non facilisis. Suspendisse sit amet purus ac mauris vehicula interdum. Maecenas felis dolor, porttitor vel ultrices luctus, varius hendrerit dui.</p>
	</div>
	<div>
		<h1>Div #2</h1>
		<p>Suspendisse nunc urna, accumsan lobortis accumsan non, congue vitae nunc. Vivamus eget elit a nulla aliquam scelerisque. Suspendisse ac faucibus quam. Sed tincidunt, lectus vel tempus ultrices, ante lacus bibendum nisi, sed ornare neque tortor vel mi. Aliquam augue enim, pretium ut consectetur eget, tincidunt sit amet dolor. Donec vitae facilisis risus. Curabitur adipiscing luctus porta.</p>
	</div>
	<div>
		<h1>Div #3</h1>
		<p>Sed eget vestibulum tortor. Curabitur at dui at odio laoreet ultrices. Proin aliquam nulla et sapien scelerisque gravida. Etiam sit amet nulla vitae dolor pharetra tristique sit amet nec leo. Phasellus dignissim velit nec risus adipiscing tempor. Mauris aliquet tincidunt dapibus. Cras ut nulla urna. Suspendisse potenti. Nunc at leo nec leo commodo dignissim. Pellentesque eleifend orci quis enim ullamcorper dictum. Nunc ante lacus, dapibus sit amet aliquam id, posuere at nibh. Aliquam eros erat, pretium sit amet mattis sit amet, porta eu dui. Integer in neque in massa fringilla fringilla. Fusce mauris purus, dapibus eu posuere ut, blandit eu lacus. Donec vitae ipsum eget mauris elementum consequat.</p>
	</div>

</div>

settings.json

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