How can I auto set height of one div based on other div element?

Question

I have following code:

<div class='parent'>
    <div class='left-child"'></div>
    <div class="right-child"></div>
</div>

What I want to do is, if height of "left-child" is going to increase then height of "right-child" is also going to increase.

This might be a simple question as I'have less knowledge of html and css.

I don't want to use any of the java script code. I want only css and html code for this.

Thanks.

Answer 1

Have a look at:

Demo

Answer 2

You can create the illusion of the left and right child having the same height, by adding the background you want to use in the right column to .parent. I've added an example:

http://jsfiddle.net/3MCzm/

Answer 3

The most cross-browsers solution is styling your divs with table properties. This is also the least semantic solution.

.parent{
     display:table;   
}
.parent > div {
     display:table-cell;
}

DEMO