wrumsby · November 28, 2013 21:20
diff --git a/dabblet.css b/dabblet.css
 /**
 * The first commented line is your dabblet’s title
 */

 body {
    font-family: sans-serif;
    box-sizing: border-box;
 }

 .container {
    border: 6px solid blue;
    padding: 10px;
    position: relative;
 }
    

 .column {
    border: 6px solid red;
    padding: 10px;
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
 }

 .column:first-of-type {
    width: 70%;
 }   
 
 .column:last-of-type {
     margin-right: 0;
     }

 .column.secondary {
    width: 300px;
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 <p>Aim: only specify the sidebar width.</p>

 <div class="container">
 	<div class="column">Major<p>things</p><p>start to</p><p>go weird if heights</p></div>
 	<div class="column secondary">Minor<p>are not the same</p><p>things</p><p>start to</p><p>go weird if heights</p></div>
 </div>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* The first commented line is your dabblet’s title
	*/

	body {
	font-family: sans-serif;
	box-sizing: border-box;
	}

	.container {
	border: 6px solid blue;
	padding: 10px;
	position: relative;
	}


	.column {
	border: 6px solid red;
	padding: 10px;
	display: inline-block;
	vertical-align: top;
	margin-right: 20px;
	}

	.column:first-of-type {
	width: 70%;
	}

	.column:last-of-type {
	margin-right: 0;
	}

	.column.secondary {
	width: 300px;
	}
	<!-- content to be placed inside <body>…</body> -->
	<p>Aim: only specify the sidebar width.</p>

	<div class="container">
	<div class="column">Major<p>things</p><p>start to</p><p>go weird if heights</p></div>
	<div class="column secondary">Minor<p>are not the same</p><p>things</p><p>start to</p><p>go weird if heights</p></div>
	</div>