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