Ken Ken - 3 months ago 17
CSS Question

Stretch child div height to fill parent that has dynamic height

As it can be seen in the following fiddle, I have two

div
s, contained in a parent
div
that have stretched to contain the big div, my goal is to make those child
div
s equal in height.

http://fiddle.jshell.net/y9bM4/


Answer

The solution is to use display: table-cell to bring those elements inline instead of using display: inline-block or float: left.

div#container {
    padding:20px;
    background:#F1F1F1
}
.content {
    width:150px;
    background:#ddd;
    padding:10px;
    display:table-cell;
    vertical-align:top;
}
.text {
    font-family: 12px Tahoma, Geneva, sans-serif;
    color:#555;
}

Working Fiddle