How is this website made? Div align and stick to each other

Question

EXAMPLE: http://jsfiddle.net/BpYZn/

Here is was I want to get: http://www.akinyapin.com/

Depending on the browser size the divs realign from 3 per row to 5 per row(maybe more, my screen is 1366 × 768, can't check).

I tryed just making the div elements to align with the float attribute. It works partially, they shrink to 3 per row depending on browser size but they wont "stick" to each other. There are big gaps between the divs in different rows.

The second website uses the "position:absolute". Is there a script for that kind of thing that anyone knows maybe?

This is the div's css

.box1{
padding:7px;
position:relative;
margin:1px;
background-color:white;
width:230px;
min-height:200px;
float:left;
-webkit-border-radius: 2px;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}

Answer 1

The website uses a javascript plugin called Masonry which is doing the stacking divs magic. I don't see this effect being accomplished with pure css.