Question

In the following HTML, the div .left and .right have different heights. Is it possible to make both divs same height without defining the height. I have tried using display:table but does not work.

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

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

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

Answer 1

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.