我如何擅长不同大小的浮动div并排？

Question

我有不同大小的div设置为float：left和long divs向下推动底部行并创建空白区域。如何删除空白区域或调整它们以保持并排。我正在使用bootstrap框架。谢谢您的帮助。这是我的链接。 http://kazi.pixub.com/abide/

 div structure:                      

<div class="article">

                    <span class="category">Ministry</span>
                    <div class="content">
                        <h2 class="article-title">The Church's Not-So-Good Future:</h2>
                        <p class="author"> by Author U. Love</p>
                        <p class="details">
                            Seriously, what is the future of the church? I could go a hundred different ways with this thought;
                            marriage, globalization, fossil fulels, consumerism, theology..</p>
                        </p>

                    </div>
                    <img class="article-image" src="images/article-image.jpg">
                </div>


    css:

.article {
    border: 1px solid #EEEEEE;
    float: left;
    margin: 5px;
    width: 280px;
}