Getting the right offset of an element relative to its offset parent in jQuery

Question

I've got the following html structure:

<div id="main" style="position: relative; width: 900px;">
    <div id="wrapper" style="padding: 40px;">
        <div id="newdiv" style="position: absolute;">
            Some content
        </div>
        <div id="existingdiv">
            Some existing content
        </div>
    </div>
</div>

I may have missed some css, but essentially the result is that main has a fixed width, wrapper is the same width minus padding, existingdiv is the same width as wrapper, and newdiv has the width of the content inside it. I am working on a plugin so the html/css may vary, but I am having difficulty with this particular scenario.

newdiv is inserted by js, and I'm trying to align its right hand side with the right hand side of existingdiv. The content inside newdiv will change so it makes sense to me to do this by setting the 'right' property of newdiv. However determining what value this should be is proving difficult.

Using jQuery's position() method returns the correct top and left (40px) offsets. I cannot find a way, using jQuery, to return the full width of the offsetParent. I have had to revert to regular javascript:

var el = document.getElementById('existingdiv');
var right = el.offsetParent.offsetWidth - el.offsetWidth - el.offsetLeft;
$('#newdiv').css('right', right);

I have also tried using jQuery UI's extended position method, however this seems to calculate the position of newdiv relative to the document, however the values are relative to 'main' so it ends up in the wrong place.

Is this the best way to go about doing what I am trying to do, or am I missing something? Will this work in all situations/browsers or might there be other issues?

Answer 1

Are you having issues because of the padding? You can use .outerWidth() to include the padding, border, and optional margin. outerWidth API

Answer 2

I think the closest I can get using jQuery is the following:

var el = $('#existingdiv');
$('#newdiv').css('right', el.offsetParent().width() - el.outerWidth() - el.position().left);

The same can be achieved to obtain the bottom:

$('#newdiv').css('bottom', el.offsetParent().height() - el.position().top);

Together these will position newdiv's bottom right corner at existingdiv's top right corner.

I don't think I can get this information a better way with other existing jquery methods, this might be quite useful built into jquery (or jquery ui) itself.