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.
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/
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;
}
References: