How to put div tiles float properly without gaps

Question

In my web page i have some tiles. I want to show the tiles in two coloumns. After the first two tiles next two tiles should go right below it. As the height is variable i am not able to get it to work properly.

Here is what i got so far.

HTML:

<div class = "content" style="color:Red"> 
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
</div>
<div class = "content" style="color:green"> 
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
</div>
<div class = "content" style="color:black"> 
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
</div>
<div class = "content" style="color:blue"> 
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
    <p> hi</p>
</div>

CSS:

.content {
    border: solid 1px #C8C8C8;
    -moz-border-radius: 25px; 
    width :45%;
    height : auto;
    float:left;
    margin-left: 10px;
    margin-top:20px;
    box-shadow: 3px 3px 3px 0px #C8C8C8;
    cursor:pointer;
 }

http://jsfiddle.net/yKuBr/

Answer 1

You can add a clearfix. a div element to clear all floats and start the flow over again.

http://jsfiddle.net/yKuBr/2/