Dynamically Set the Height of Two floated DIVS

Question

The coding is done using VS2008 There are two divs in my page namely "dvLeftContent" and "dvRightContent". I cannot statically set the height of the pages since "dvRightContent" have variable heights on various pages (Master Pages are used here) Is there a client side function(javascript or jquery) that takes the height of the right div and assigns it to left div?

Answer 1

Using jQuery:

$("#dvRightContent").bind("resize", function(){
    $("#dvLeftContent").css('height', $("#dvRightContent").css('height')); 
});

Answer 2

Thanks micahwittman. Some minor changes

   $("#dvRightContent").resize(function(){
        $("#dvLeftContent").css("height", ($("#dvRightContent").attr("offsetHeight") - 250 ) +"px");
    });

Its because height will give only "auto" in this case as its set like that

Answer 3

There is also a jQuery plugin which does the job for you: Equalize

It handles both the scenario where rightcol is larger then leftcol or where leftcol is larger than rightcol. It also allows you to specify which element inside either leftcol or rightcol should get the space added.

Answer 4

Hi mlarsen, Will this plugin works if the div changes(using js without a postback) after the page is loaded?

Answer 5

Hi micahwittman, yeah i know. I posted it for any future reference. Thanks pal