Question

I have two side-by-side <div> blocks that are both contained in a larger <div> block. I’d like the smaller of the two child <div> blocks to take up all remaining vertical space of the parent block, without actually knowing the height of the parent.

Is this possible to do without any Javascript?

In this example: http://jsfiddle.net/5J8Em/2/ I’d like the red <div> to be just as tall as the blue one.

Answer 1

Try using display:table; for parent element and display: table-cell; for children:

HTML:

<div id="a">
    <div id="b">
        hello world 
    </div>
    <div id="c">
        hello world hello world hello world 
        hello world hello world hello world 
    </div>
</div>​

CSS:

#a {
     background-color:rgb(100,100,100);      
     width:200px; 
     display:table;
}

#b {
     background-color:red; 
     vertical-align:top;
     display: table-cell;
}

#c {
     background-color:blue;   
     width:100px;
     word-wrap:break-word;   
     display: table-cell;    
}

Here is the jsFidde demo