Question

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;
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);
}

Answer 1

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");