Inline-Block Grid

dabblet.css

/**
 * Inline-Block Grid
 */

* {
	margin: 0;
	padding: 0;
	list-style: none;
}

.container {
	width: 960px;
	margin: 0 auto;
}

.col-1-3 {
	width: 300px;
	border: 1px solid #444;
	min-height:150px;
	vertical-align: top;
	display: inline-block;
}

dabblet.html

<ul class="container">
	<li class="col-1-3">
		<h4>Who</h4>
		<p><a href="https://alpha.app.net/cdn">cdn</a> ( & cn) &mdash; inspired by <a href=https://alpha.app.net/po>po</a></p>
	</li>
		<li class="col-1-3">
		<h4>How</h4>
		<p>
			<ol>
				<li>By badging your current avatar;</li>
				<li>by setting your avatar to &#8220;The Face of Po&#8221;;</li>
				<li>by [after paying a nominal annual fee] uploading a set of
				avatars representing the emoticons you use frequently</li>
				<li>by [after paying a nominal annual fee] uploading a set of
				avatars representing the emoticons you use frequently</li>
			</ol>
		</p>
	</li>
		<li class="col-1-3">
		<h4>What</h4>
		<p>See above</p>
	</li>
		<li class="col-1-3">
		<h4>Where</h4>
		<p><a href="http://alpha.app.net/">app.net</a> and applications built for/on <a href="http://app.net">app.net</a>.</p>
	</li>
		<li class="col-1-3">
		<h4>When</h4>
		<p>PoMoticons became possible when avatar changing became available in the <abbr title="Application
		Programming Interface">API</abbr>; as for when you can change your avatar: whenever you like</p>
	</li>
		<li class="col-1-3">
		<h4>Why</h4>
		<p>&hellipp; not?</p>
	</li>
		<li class="col-1-3">
		<h4>Which<!-- the one everyone forgets --></h4>
		<p> :) :( ;) ;( :D :| :@ |-) :o :P o_0</p>
	</li>
</ul>

dabblet.js

// alert('Hello world!');

settings.json

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