CSS：格式化塊。奇怪的高度行爲或如何通過塊內的內容來調整高度

我對CSS並不十分熟悉，並遇到以下問題：CSS：格式化塊。奇怪的高度行爲或如何通過塊內的內容來調整高度

我正在製作3個項目的列表（實際上它們是div），並添加了圖片標題和中的每一個裏面的一些描述。一切都很好，直到那時我被要求在此之後添加另一個塊... 並且在我嘗試了之後，我調查了添加的塊幾乎完全覆蓋了新聞列表:(

這裏是代碼產生一個新聞列表+風格

// in loop for 3 items 
<div class="newslist"> 
    <a href="{{ item.get_absolute_url }}"> 
    <img src="{% thumbnail item.main_image 230x220 crop %}" alt="{{ item.image_description}}"/> 
    </a> 
    <br /> 
    <a href="{{ item.get_absolute_url }}" class="article_title">{{ item.title }}</a> 
    <p>{{ item.short_description|truncatewords:35}}</p> 
</div>

風格：

.newslist{ 
    display:block; 
    height:auto; 
    width: 22%; 
    float:left; 
    padding: 10px; 
    text-align: left; 

} 

.newslist a{ 
    margin-top:30px; 
    font-size:12px; 
    color: #be1e2d; 
    text-decoration:none; 

} 
.newslist a:hover{ 
    text-decoration:underline; 
} 

.newslist br{ 
    padding: 10px; 

} 

.newslist img{ 
    width:150px; 
    height:140px; 
    text-align: 
    padding: 5px; 
    margin-bottom:20px; 
    border: 1px solid #CCCCCC; 
    background:#f1efef;` 
} 

.newslist p{ 
    font-size:11px; 
} 

.newslist a:hover img{ 
    border: 1px solid blue; 

}

網頁的完整源代碼是在這裏： http://j-in.org.ua

這裏的問題是，如果下面的截圖： http://img.skitch.com/20091021-d9y2i9h5cpxgk69fji2ue5pcib.png

和新的塊的代碼如下：在風格