div not loading in right place
<p>Hi im trying to load a div next to an link/button if clicked by unauthenticated users.</p>

<p>i have the following:</p>

<pre><code>$(function () {

    $(".unauthenticated").click(function () {
        ShowMessage($(this).attr("id"), "#unauthenticated-div")
    });

    function ShowMessage(clickedItemId, divId) {

        clickedItem = $("#" + clickedItemId);
        var pos = clickedItem.offset();
        var width = clickedItem.width();

        $(divId).css({
            "left": pos.left + width + 10,
            "top": pos.top + 10
        }).show();
    }
});

&lt;div id="unauthenticated-div" title="Please Login" style="display: none;"&gt;
    &lt;p&gt;&lt;span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"&gt;
    &lt;/span&gt;You must &lt;a href="#" id="login-link"&gt;login&lt;/a&gt;or &lt;a href="/Account/Register/"&gt;Register&lt;/a&gt;to do this&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>It shown the div, but not next to the clicked link. when i step through the code, pos and width are as expected.</p>
