Boyutsuz divleri yan yana sıralayabilmek

Blog tarzında hazırladığım bir şablonda ekrana basılan yazıların alt alta değilde yan yana görünmesini istedim. Hep denemek istediğim bir şeydi. Div'lerin genişlik ve yükseklik değerlerini belirterek yaptığım zaman hiç bir şekilde bir sıkıntım yok. Ama ben şu şekilde istiyorum. 200px sabit genişlik olacak, yükseklik içeriğe göre değişecek. Css bu şekilde ayarladığım da yine yan yana sıralanıyor ancak. Uzun gelen div'lerin solunda veya sağında boşluklar oluşuyor. Bknz.;



Bu boşlukların kendiliğinden diğer div'ler ile doldurulmasını istiyorum. Buna daha çok tumblr temalarında denk geliyorum. Sizlerde görmüşsünüzdür. İnternet de nasıl yapabileceğime dair arama yaptım ancak verimli bir sonuç elde edemedim. Buda arama yaparken kullandığım tabirlerin tam olarak anlatan kelimeler olmamasından kaynaklı. Nasıl bir arama yaptırmam gerektiğini de bilmiyorum.
Bu kısımda şuana kullandığım kodları görmek isterseniz de şu şekilde.

<div class="yazi-alan">
	<div class="baslik-alan">Naber?</div>
	<div class="yazi">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam ut lacus vel euismod. Donec quis accumsan erat. Praesent tincidunt metus eget lorem iaculis, et adipiscing nisl vehicula.
	</div>
</div>
<div class="yazi-alan">
	<div class="baslik-alan">Naber?</div>
	<div class="yazi">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam ut lacus vel euismod. Donec quis accumsan erat. Praesent tincidunt metus eget lorem iaculis, et adipiscing nisl vehicula.
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam ut lacus vel euismod. Donec quis accumsan erat. Praesent tincidunt metus eget lorem iaculis, et adipiscing nisl vehicula.
	</div>
</div>
<div class="yazi-alan">
	<div class="baslik-alan">Naber?</div>
	<div class="yazi">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam ut lacus vel euismod. Donec quis accumsan erat. Praesent tincidunt metus eget lorem iaculis, et adipiscing nisl vehicula.
	</div>
</div>
<div class="yazi-alan">
	<div class="baslik-alan">Naber?</div>
	<div class="yazi">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam ut lacus vel euismod. Donec quis accumsan erat. Praesent tincidunt metus eget lorem iaculis, et adipiscing nisl vehicula.
	</div>
</div>
<div class="yazi-alan">
	<div class="baslik-alan">Naber?</div>
	<div class="yazi">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam ut lacus vel euismod. Donec quis accumsan erat. Praesent tincidunt metus eget lorem iaculis, et adipiscing nisl vehicula.
	</div>
</div>

.yazi-alan{
	width:200px;
	height:100%;
	background:url(img/o60.png);
	position:relative;
	float:left;
	margin:0 10px 10px 0;
}
.baslik-alan{
	width:200px;
	font-family:segoe;
	color:#cccccc;
	font-size:13px;
	text-align:center;
}
.yazi{
	width:190px;
	font-family:segoe;
	color:#cccccc;
	font-size:13px;
	padding:5px;
}

Nasıl bir yol izlemem gerekiyor?

üstad onu yapmak için jquery kullanabilirsiniz. bu iş için yazılmış masonary adlı eklenti işini görücektir.

Eyvallah hocam bunu bir deniyeyim.