CSS делает два divs равными по высоте с таблицей отображения

В следующем HTML, div.left и .right имеют разную высоту. Можно ли сделать обе высоты одинаковой высоты без определения высоты. Я пробовал использовать display: table, но не работает.

HTML:

<div class="wrap">

    <div class="left">
       Lorem    
    </div>

    <div class="right">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>

</div>

CSS

.wrap{
    overflow:hidden;
    width:250px;
    display: table;
    border-collapse: collapse;
}


.left{
    width:100px;
    float:left;
    display: table-cell;
    border-bottom:1px solid green;    
}


.right{
    width:150px;
    float:left;
    border-bottom:1px solid red;
    display: table-cell;     
}

jsfiddle: http://jsfiddle.net/fJbTX/1/

Ответы

Ответ 1

Удалите float, который выводит элементы из нормального потока документа, а также добавляет в другой элемент-оболочку, чтобы действовать как table-row:

table-cell, ведет себя как элемент <td> HTML

Это означает, что для этого требуется (хотя я еще не подтвердил свой вывод) родитель display: table-row, поскольку td требует родительский элемент tr.

.wrap{
    overflow:hidden;
    width:250px;
    display: table;
    border-collapse: collapse;
}

.row {
    display: table-row;
}
.left{
    width: 50%;
    display: table-cell; 
    background-color: #0f0;
}


.right{
    width: 50%;
    background-color: #f00;
    display: table-cell;     
}​

JS Fiddle demo.

Литература: