Untitled

dabblet.css

div:not(#container){
	background: rgb(127,125,224);
	text-align: center;
	width: 46px;
	height: 46px;
	margin: 2px;
	font: 26px Helvetica;;
}

#container{
	height: 400px;
	background: darkgreen;
}

dabblet.html

<div id="container"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<!--
what I want

<table><tr>
<td>
<div></div><div></div><div></div><div></div>
</td>
<td>
<div></div><div></div><div></div>
</td>
<td>
<div></div><div></div><div></div><div></div>
</td>
<td>
<div></div><div></div>
</td>
</tr></table>
-->

dabblet.js

function loadScript(u, c)
{var h=document.getElementsByTagName('head')[0];var s=document.createElement('script');
s.type='text/javascript';s.src=u;s.onreadystatechange=c;s.onload=c;h.appendChild(s);}

loadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js",function(){
	
	var maxheight = $("#container").height();
	
	$("#container").wrapInner("<table><tr><td>");
	
	$("#container div").each(function(key){
		var width = Math.floor((Math.random()*100)+100);
		var height = Math.floor((Math.random()*100)+100);

		$(this).css({'width':width,'height':height});
		
		var bottom = $(this).position().top+height;
		
		$(this).data('bottom', bottom);
		$(this).text(bottom);
		
		if ( bottom > maxheight) {
			// insert </td><td> before this
			$(this).before("</td><td>");
		}

	});
	
});

settings.json

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