jQuery positioning woes - can't accurately position element

I've been trying to position a #logo div at the center of a centered #content div using jQuery but results are inconsistent. Sometimes it works, other times not. In Safari on the iPad it often "fails" and the result is that the logo is placed under the menu which is of course not usable. Here's the central code:

function ReflowElements()
{
    var contentOffset = $("#content").offset();
    var contentWidth = $("#content").width();
    var menuWidth = $("#menu").width();

    var menuX = (contentOffset.left + contentWidth) - (menuWidth + 45);
    var menuY = contentOffset.top + 15;
    var menuPos = { left : menuX, top : 开发者_如何学JAVAmenuY };

    var logoWidth = $("#logo").width();
    var logoX = (contentOffset.left + (contentWidth/2)) - (logoWidth/2);
    var logoY = menuY + 15;
    var logoPos = { left: logoX, top: logoY };

    $("#logo").offset(logoPos);
    $("#menu").offset(menuPos);
}

Site. http://restaurant-passagen.dk/

Any clues appreciated.

Dude, CSS:

#logo {
    display:block; 
    margin:auto;
}