Как правильно использовать бестабличный макет с границами с помощью CSS? ⇐ CSS

[Anonymous]

Я работаю над новой HTML-страницей и хочу использовать макет без таблиц. Имейте в виду, что то, что следует ниже, является лишь частью страницы, но я думаю, что оно дает четкое представление о том, что я пытаюсь сделать.

Приведенный ниже HTML-код: предназначен для рендеринга шести ячеек с текстом внутри. Я хочу, чтобы ячейки имели соответствующий размер, чтобы содержать текст внутри.

Проблема, с которой я столкнулся, заключается в том, что границы нарисованы неправильно. И в IE, и в Firefox я вижу две проблемы:

1) Одна из границ нарисована за пределами таблицы.

2) Границы между ячейками в первой строке прорисовываются не полностью.






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;
}






THIS TEXT IS MUCH LONGER THAN THE TEXT IN THE OTHER CELLS

ABC

December 25, 2012




Hello, World!

123

May 1, 2013







Подробнее здесь: https://stackoverflow.com/questions/138 ... -using-css