Basic two-column (float) layout

dabblet.css

/* Basic two-column (float) layout */

* {
	box-sizing: border-box;
}

.section-main {
	width: 800px;
	margin: 40px auto;
	overflow: hidden;
	
	background: rgba(200,0,0,0.3);
}

.article-main {
	width: 		500px;
	padding: 	20px;
}

.aside-main {
	width: 	300px;
}

.aside-main img {
	width: 100%;
}

.article-main, .aside-main {
	float: left;
}

@media (max-width: 750px) {
	.section-main {
		width: 	600px;
	}
	
	.article-main, .aside-main {
		width: 300px;
	}
}

dabblet.html

<section class="section-main">

	<article class="article-main">
	
		<h2 class="page-title">My title</h2>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, totam blanditiis ex quaerat temporibus neque ad inventore aut nam ducimus.</p>
	
	</article>
	
	<aside class="aside-main">
		
		<img src="http://placekitten.com/200/200">
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, totam blanditiis ex quaerat temporibus neque ad inventore aut nam ducimus.</p>
	
	</aside>

</section>

dabblet.js

// alert('Hello world!');

settings.json

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