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 ri

Answer 1

I've used that in a website I made, to display a div in a certain position, always relative to another div and always relative to the dimensions of the browser window (even when you stretch it manually).

Here's the code:

// function to place the div
var newdiv = function () {
   var o = $('#olddiv').offset();
   var h = $('#olddiv').height();
   var w = $('#olddiv').width();
   $('#newdiv').css({'top': o.top,
                     'left': o.left,
                     'width': w,
                     'height': h       
   }).show();
}

// listen the window changes and correct the newdiv position
$(window).resize(function(){ newdiv(); });

// display the newdiv after DOM is loaded, or whenever you want
newdiv();

Note that you may need to add another vars to the css above, like margin, padding, etc, in order to get the right position, or even add manually values to top and left, in case the new div isn't exactly like the old one.