html navbar wrapping/not working properly

I've got a navbar with an image on the left and right side of the navbar. Its percentage width and the right image keeps wrapping below the navbar when the document is resized.

Its mostly a problem with a percentage width navWrapper minus a pixel amount. The pixel amount is from adding with width of leftNav and rightNav.

I can't use the new css Calc() because i need to support legacy browsers for my school. (half the computers have IE7).

JSFiddle:http://jsfiddle.net/az4A6/2/

HTML

<div id="navbar"><div id="navWrapper"><div id="leftNav"></div><div id="navInnerWrapper"></div><div id="rightNav"></div></div></div>

CSS

#navbar {    width:100%;    clear:both;    background:url('../img/navTexture.png') repeat-x scroll center bottom #FFF;    height:54px;    margin:0px;}#navWrapper {    width:90%;    height:54px;    max-width:950px;    margin:0px auto;    position:relative;    background:url('../img/navWrapperTexture.png') repeat-x scroll center bottom #FFF;}#leftNav {    width:37px;    height:54px;    background-image:url('../img/leftNav.png');    float:left;}#rightNav {    width:37px;    height:54px;    background-image:url('../img/rightNav.png');    float:left;}#navInnerWrapper {    display:block;    margin-top:6px;    height:40px;    width:100%;    max-width:876px;    float:left;}

jQuery

$(document).ready(function() {    $('#navInnerWrapper').width($('#navWrapper').width() - 74+'px');});$(window).resize(function() {    $('#navInnerWrapper').width($('#navWrapper').width() - 74+'px');});