Pure CSS Masonry Concept [CSS]

dabblet.css

/**
 * Pure CSS Masonry Concept [CSS]
 */

html,body {
    height: 100%;
    overflow: hidden;
}

body {
    font: normal normal 11px/14px "Lucida Grande", "Lucida Sans Unicode", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0 0 1px rgba(0,0,0,0.01);
    -webkit-text-stroke: 1px transparent;
    text-rendering: optimizeLegibility;
    color: #333;
}

.container {
	transform:rotate(90deg);
	transform-origin: 200px 200px;
}

.image {
	background:red;
	margin:0 10px 10px 0;
	float:left;
}

.one {
	height:200px;
	width:300px;
}

.two {
	height:200px;
	width:230px;
}

.three {
	height:200px;
	width:240px;
}

.four {
	height:200px;
	width:350px;
}

dabblet.html

<div class="container">
<div class="image one"></div>
<div class="image two"></div>
<div class="image three"></div>
<div class="image four"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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