CODEWITHSUNDEEP
htmlcsscss-tables
user1355300
user1355300

Reputation: 4987

CSS making two divs equal height with display table

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/

Upvotes: 14

Views: 56382

Answers (2)

David Thomas
David Thomas

Reputation: 253486

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:

Upvotes: 24

Huangism
Huangism

Reputation: 16448

Something like this?

http://jsfiddle.net/fJbTX/3/

I took out the float property

Upvotes: 5

Related Questions