jquery css strange problem with chrome/safari browser

this is page i'm currently working on: http://devel.spoorle.com/poc/

At the bottom there is a div called footer, which contains 3 other divs: logo_lower, annoucements_online and menu_lower. Two of them have fixed width, logo_lower 406px and menu_lower 329px while annoucements_online gets it width from jquery script:

var annoucementsWidth = $(window).width() - $("#menuLower").width() -    $("#logoLower").width();
$("#annoucementsOnline").css("width",annoucementsWidth + "px");

For Opera, Firefox and even IE 8 with works perfectly fine, but I have problem with Safari and Chrome. The menu_lower div is not showed... any idea what it might be? I saw somewhere that jquery calculates wrong $(widow).width() for those browsers. I tried to put my code inside $(window).load() but with no success. Here are the divs:

div.logo_lower {
width: 406px;开发者_StackOverflow中文版
height: 45px;
display: inline-block;
float: left;
overflow: hidden;
}

div.annoucements_online {
background: #362f2d;
height: 45px;
display: inline-block;
overflow: hidden;
}

div.menu_lower {
background: #362f2d;
width: 329px;
height: 45px;
display: inline-block;
float: right;
overflow: hidden;
}
div.footer {
width: 100%;
height: 45px;
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
background: rgba(0, 0, 0, 0);
}

Try to get the width like this instead of unsing jQuery.

document.documentElement.clientWidth

Your jQuery needs to go in $(document).ready() not $(window). Also, when I test your site on Chrome, I get the same results as Firefox.

If jQuery isn't playing nice, you can always go the vanilla JavaScript route (more info), although this is more complex as jQuery usually does all the compatibility stuff for you.

Ok I fixed it othere way, simply I make annoucements div smaller by 5px:

var annoucementsWidth = $(window).width() - $("#menuLower").width() -    $("#logoLower").width() - 5;
$("#annoucementsOnline").css("width",annoucementsWidth + "px");