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

Answer 2

Use this plugin and write a function so when one div's attribute (which in our case is Height) changes, your function updates the other one's Height!

Answer 3

There are a few different methods for solving this problem. See here: http://css-tricks.com/fluid-width-equal-height-columns/

Answer 4

Thankyou everyone! The easiest solution is to use TABLE instead of DIV (wherever this issue rises)...