htmlcsslayoutdoctype

How to correctly use tableless layout with borders using CSS?

I'm working on a new HTML page and I want to use a table-less layout. Bear in mind that what follows here is only part of the page, but I think it paints a clear picture of what I'm trying to do.

The HTML below is meant to render six cells with text inside. I want the cells to be sized appropriately to contain the text inside.

The problem I'm having is that the borders are drawn incorrectly. In both IE and Firefox, I see two problems:

1) One of the borders is drawn outside the table.

2) The borders between the cells in the first row are drawn incompletely.

<!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>
Solution

  • Don't go what others say, that don't make layouts using tables, but when it comes to tabular data and if you use div's for making a table doesn't make any sense to me, just don't use tables for designing layouts, but YOU SHOULD USE IT FOR TABULAR DATA

    Still if you want to use you can refer this