CSS making two divs equal height with display table

Remove the float, which takes the elements out of the document’s normal flow, and also add in another wrapper element, to act as the table-row:

table-cell, behaves like the <td> HTML element

Which implies that this requires (though I’ve not verified my inference) a display: table-row parent, as a td requires a tr parent-element.

.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.

References:

• CSS display.