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>