Javascript/jQuery positioning issue
<p>Here is the problematic part of my code:</p>

<pre><code>$('#chat-bar').prepend('&lt;li id="chat-button-with-'+userid+'"&gt;&lt;a href="#"&gt;'+username+'&lt;/a&gt;&lt;/li&gt;');

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

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

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

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

<p>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:</p>

<pre><code>parentright = $('body').width() - $('#chat-button-with-'+userid).offset().left;
</code></pre>

<p>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?</p>

<p>If I put <code>alert(parentright)</code> 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?</p>
