wrumsby · November 26, 2013 20:19
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;
 }

 .column:first-of-type {
    margin-right: 350px;
 }   

 .column.secondary {
    position: absolute;    
    top: 10px;
    bottom: 10px;
    right: 10px;
    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;
	}

	.column:first-of-type {
	margin-right: 350px;
	}

	.column.secondary {
	position: absolute;
	top: 10px;
	bottom: 10px;
	right: 10px;
	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>