Question

I’m VERY new to jQuery (literally started working with it today), and so I’m betting I’m missing something very obvious.

I’m working with jQuery 1.5.2 and ASP.NET 3.5 in VS 2010. I’m trying to dynamically set the height of one div container to that of another div container. The latter div grows to accomodate the content within, and I need the two to be equal in height otherwise it looks terrible.

I have tried the following code in the header of the Site.master file:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var newHeight = $("#content").height() + "px"; //Also tried without  + "px"
        $("#sidebar").height(newHeight);
    });
</script>

This is doing…something. The top of the first div is being rendered inline with the bottom of the second; I’m not quite sure if they are the same height, though.

I’m using this on Firefox 10.0.2 right now; I haven’t checked on any other versions or browsers.

Any help is appreciated on this.

Answer 1

First: .height is used without the “px”

Second: this code will set the height of #sidebar equals to the height of #content when document loads completely.

So, if you just wanna do this, this code should be enought.

But, if height of element changes dinamically (like with ajax request to get more content and then set it to #content), you must adjust #sidebar height every time the height of #content is changed.

About the problem of position of these elements, should be some error in your css.. something about their float properties..