How to position a div dynamically below another?

Question

I'm trying to use jQuery to detect the position of a div (#olddiv), so I can use that position to place another div (#newdiv) exactly below it. The right borders of the 2 divs are aligned (right border).

I'm trying to get the #olddiv bottom and right locations to use them as the #newdiv top and right borders. I've used this code, but it's not working. Any idea what I'm doing wrong?

var right = $('#olddiv').position().right;
var top = $('#olddiv').position().bottom;
$('#newdiv').css('top', right);
$('#newdiv').css('right', top);     

Also, I'm not sure if position is what I need. I think this can be done with position or offset, but I'm not sure:

$('#ID').position().left
$('#ID').offset().left

Thanks

Answer 1

I've used offset() to position elements dynamically. Try this:

var offset = $('#olddiv').offset();
var height = $('#olddiv').height();
var width = $('#olddiv').width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";

$('#ID').css( {
    'position': 'absolute',
    'right': right,
    'top': top
});

also don't forget to bind this to the window.onresize event if you need it to scale when the user resizes the window.

UPDATE: another thought - does this have to be positioned absolutely? Why not just insert the div after the other in the DOM?

$('#olddiv').after($('#ID').html());

then just make sure they are the same width.

Answer 2

There is a pretty cool plugin getting developed by the jQuery UI team that helps with position.

Lets you do something like this:

$(".menu").position({ my: "left top", at: "left bottom", of: ".menubutton" });