html navbar wrapping/not working properly

Question

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

Answer 1

You can do this easily with box-sizing:border-box a polyfill for IE6-7 is here (you need to make sure that you link this in your css from the root not form the css file). You also need to make your 100% div be after the 2 floating ones. You can read more about box-sizing here and here.

CSS:

* {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    *behavior:url(/css/boxsizing.htc)
}
#navbar {
    width:100%;
    height:100px;
    background:blue;
}
#navWrapper {
    margin:0 auto;
    width:90%;
    height:100px;
}
#leftNav, #rightNav {
    width:37px;
    height:100px;
    background:red;
}
#leftNav {
    float:left;
}
#rightNav {
    float:right;
}
#navInnerWrapper {
    width:100%;
    height:100px;
    padding:0 37px;
    background:green;
}

HTML:

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

DEMO

Answer 2

Is there any specific reason you are using jQuery to handle the sizing? Could it be achieved with a right float instead?

http://jsfiddle.net/az4A6/1/

#rightNav {
    width:37px;
    height:54px;
    background-color:red;
    float:right;
}