How to Utilize divs as a grid?

Question

Okay so I am making a website to display the last eight entres from a database and display them in a grid format, but the grids aren't displaying correctly they are displaying like so: 1 :

But I am wanting them to display similar to this:

I ment to draw an extra column on the drawing sorry. And no mater what stay in the same column and row as it should be but also be underneath the one above it. The code is on my jsfiddle here: http://jsfiddle.net/PGdMd/

Also The css needs to be responsive because the content text for each div will change depending on the data entered in the mySQL database.

<h1>Sorry it made me put this here</h1>

Answer 1

Reading from related questions, it would seem you want jQuery's masonary. Either that, or Isotope.

Answer 2

Have a look at Masonry. This is a jQuery plugin that will do what you want and a lot more.

http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout

Answer 3

Have you considered some of the css frameworks that can be used to easily implement layouts? Blueprint, 960 Grid, Twitter Bootstrap, foundation, etc. There are a lot of 3 column implementations available that would not only make this easy, but would simplify your project in general.