Height of div using jQuery?

I have created a portfolio image gallery but can't get the captions to work properly... I am using: http://s3.amazonaws.com/buildinternet/live-tutorials/sliding-boxes/index.htm (I'm using the second one)

The only problem is my captions are different sizes so I'm trying to use the code below:

$('.boxgrid.caption').hover(function () {
    var $height = $("#description-text", this).height();
    $(".cover", this).stop().animate({
        top: '375' - $height
    }, {
        queue: false,
        duration: 160
    });
}, function () {
    $(".cover", this).stop().animate({
        top: '365px'
    }, {
        queue: false,
        duration: 160
    });
});

But for some reason the output code o开发者_如何学Pythonf $height is 395 when it should be 150 or somewhere along those lines...

Please help...

Thanks Ben

$("#description-text", this) is rather odd.

$("#description-text") should suffice, that is provided you have only one element with this ID in your code. If not, well, then that will be the problem.

Try using outerHeight(), as it includes padding&border within the box

Change the second line

var $height = $("#description-text").height();

I have solved the answer (sort of) I just changed the textbox to the side and I'm going to have it slide in from the side...

Thanks Ben