title: How to put div tiles float properly without gaps
body: <p>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.</p>
  
  <p>Here is what i got so far.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class = "content" style="color:Red"&gt; 
      &lt;p&gt; hi&lt;/p&gt;
      &lt;p&gt; hi&lt;/p&gt;
      &lt;p&gt; hi&lt;/p&gt;
      &lt;p&gt; hi&lt;/p&gt;
      &lt;p&gt; hi&lt;/p&gt;
      &lt;p&gt; hi&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class = "content" style="color:green"&gt; 
      &lt;p&gt; hi&lt;/p&gt;
      &lt;p&gt; hi&lt;/p&gt;
      &lt;p&gt; hi&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class = "content" style="color:black"&gt; 
      &lt;p&gt; hi&lt;/p&gt;
      &lt;p&gt; hi&lt;/p&gt;
      &lt;p&gt; hi&lt;/p&gt;
      &lt;p&gt; hi&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class = "content" style="color:blue"&gt; 
      &lt;p&gt; hi&lt;/p&gt;
      &lt;p&gt; hi&lt;/p&gt;
      &lt;p&gt; hi&lt;/p&gt;
      &lt;p&gt; hi&lt;/p&gt;
      &lt;p&gt; hi&lt;/p&gt;
      &lt;p&gt; hi&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
   }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/yKuBr/" rel="nofollow">http://jsfiddle.net/yKuBr/</a></p>