title: How do i adept different sized floating divs to stay side by side?
body: <p>I have different sized divs  set to float:left and long divs are pushing the bottom rows down and creating blank area .How do i remove the blank areas or adjust them to stay side by side. I am using bootstrap framework. Thank you for your help. here is my link. <a href="http://kazi.pixub.com/abide/" rel="nofollow">http://kazi.pixub.com/abide/</a> </p>
  
  <pre><code> div structure:                      
  
  &lt;div class="article"&gt;
  
                      &lt;span class="category"&gt;Ministry&lt;/span&gt;
                      &lt;div class="content"&gt;
                          &lt;h2 class="article-title"&gt;The Church's Not-So-Good Future:&lt;/h2&gt;
                          &lt;p class="author"&gt; by Author U. Love&lt;/p&gt;
                          &lt;p class="details"&gt;
                              Seriously, what is the future of the church? I could go a hundred different ways with this thought;
                              marriage, globalization, fossil fulels, consumerism, theology..&lt;/p&gt;
                          &lt;/p&gt;
  
                      &lt;/div&gt;
                      &lt;img class="article-image" src="images/article-image.jpg"&gt;
                  &lt;/div&gt;
  
  
      css:
  
  .article {
      border: 1px solid #EEEEEE;
      float: left;
      margin: 5px;
      width: 280px;
  }
  </code></pre>