如何正確使用帶有CSS邊框的無表格佈局？

我正在研究一個新的HTML頁面，我想使用無表格佈局。請記住，這裏的內容只是頁面的一部分，但我認爲它描繪了我想要做的事情的清晰畫面。如何正確使用帶有CSS邊框的無表格佈局？

下面的HTML是爲了呈現六個單元格里面的文本。我希望細胞的大小適當，以包含內部的文字。

我遇到的問題是，邊界繪製錯誤。在IE和Firefox，我看到了兩個問題：

1）邊界的一個繪製表外。

2）第一行中的單元之間的邊界不完全繪製。

<!DOCTYPE html> 
<html> 
<head> 
<style> 

html 
{ 
} 
.reviewRow 
{  
    clear:both;  
} 
.reviewBlock 
{ 
float:left; 
border-top: 1px solid #444; 
border-left: 1px solid #444; 
} 
.rightBorder 
{ 
    border-right: 1px solid #444; 
} 
.bottomBorder 
{ 
    border-bottom: 1px solid #444; 
} 
</style> 
</head> 

<body> 
<div class='reviewRow'> 
    <div style="width:200px;" class='reviewBlock'>  
     THIS TEXT IS MUCH LONGER THAN THE TEXT IN THE OTHER CELLS 
    </div> 
    <div style="width: 225px" class='reviewBlock'>  
     ABC 
    </div> 
    <div style="width: 100px" class="reviewBlock rightBorder">  
     December 25, 2012 
    </div> 
</div> 
<div class='reviewRow bottomBorder'> 
    <div style="width:300px;" class='reviewBlock'>  
     Hello, World! 
    </div> 
    <div style="width: 125px" class='reviewBlock'>  
     123 
    </div> 
    <div style="width: 100px" class="reviewBlock rightBorder">  
     May 1, 2013 
    </div> 
</div> 
<div style='clear:both;'></div> 
</body> 
</html>

來源

2012-12-12 Daniel Allen Langdon

爲什麼不使用表？表格對於數據表格來說絕對正確......它們是爲您的目的而製作的 – Andy

在這裏不使用它們的一個特殊原因是我不希望數據顯示在每行都具有相同編號的網格中（和佈局）的細胞。我想我可以爲每一行使用一張不同的表格，但我給人的印象是CSS是首選的解決方案。我可能是錯的。這就是爲什麼我在這裏問的原因:-) –

對於尚未能夠直接可視化HTML/CSS代碼的noobs，這是它的外觀：http://jsfiddle.net/BK5Yq/1/'： P' –