Javascript/jQuery positioning issue

Here is the problematic part of my code:

$('#chat-bar').prepend('<li id="chat-button-with-'+userid+'"><a href="#">'+username+'</a>开发者_StackOverflow</li>');

$('#chat').prepend('<div class="chat-box" id="chat-box-with-'+userid+'"></div>');

parentright = $('body').width() - $('#chat-button-with-'+userid).offset().left;

$('#chat-box-with-'+userid).css({right:parentright, bottom:'24px'});

What I'm trying to do is line #chat-box-with-n up with its respective button, #chat-button-with-n

userid and username and so on are all set before this, so this is not the issue. In fact, after the page loads, if I set userid to 3 in the console and then do:

parentright = $('body').width() - $('#chat-button-with-'+userid).offset().left;

I'll get the proper result. Yet it doesn't seem to be able to get this result after just appending it. What am I doing wrong?

If I put alert(parentright) just after the line, I'll just get the body width. So $('#chat-button-with-'+userid).offset().left seems to be 0 at that point. Do I need to do this some other way?

---

This might not be the only issue, but you didn't set the value type (px, em, etc.) to the css function:

$('#chat-box-with-'+userid).css({right:parentright, bottom:'24px'});

should be

$('#chat-box-with-'+userid).css({right:parentright+"px", bottom:'24px'});

UPDATE:

I was unable to reproduce the issue, please see if this example does what you need: http://jsfiddle.net/xTrQ9/2/

Instead of setting the right property and introducing unnecessary math, I am using the left property instead. Note that changing the position of the #chat-bar also changes the position of the box, or in other words, the two are vertically aligned.