How to automatically increase height of a div, as the height of another div increases?

Question

Here is what i want...

<div style="width:1000px;">

  <div style="float:left; width:300px; height:auto;">    </div>
  <div style="float:right; width:700px; height:auto;">    </div>

</div>

I want that, if height of second DIV increases, height of third DIV should also increase automatically...

In short, (second DIV height = third DIV height)

Answer 1

You can use JavaScript to get an element height and then use this value to set other element height, as you can see here using jQuery:

var height = $(".div1").height();

And, if your first div height changes with the window resize or something like this, you can use an EventListener to call the function that will modify the .div2 based in the first div's height:

window.addEventListener('resize', function(event){
    $(".div2").css({"height":height});
});

You can even apply a CSS transition to the height property to animate the height change.

JSFiddle Demo