Fluid-width nav in IE7 - css

Question

Working on revamping a client's site, and one of their requests is to change the nav to accommodate text of any size. Here's the trick: I can't change html, just css and javascript. Oh, and the version of jquery on the site is 1.4.4 - this can't change either.
I've got a javascript-based solution in place, and it's working across all modern browsers - but I can't seem to get it to function in IE7. The solution relies on all nav elements rendering in their native width (i.e. wrapping instead of resizing), in order to calculate the necessary width changes. In IE7, the nav items don't clear - the last one shrinks to a tiny size to fit into the first row, and the javascript thus can't tell that resizing needs to be calculated.
The javascript should work fine, the main issue is that I need to know what my css isn't doing to force the last element to wrap instead of resize in IE7. I've tried an exhaustive number of combinations of display: inline-block;, white-space: nowrap;, and float: left; to no avail.
I isolated the nav in question and put it in a fiddle right here. If anyone has any ideas, or knows a better way I can implement, let me know - all suggestions welcome!

Answer 1

I have two versions of your jsFiddle here to compare with and verify that this is what you're going for. I cleaned up your CSS a bit but the main thing I did was set a percentage width on the li in your navigation. You have 6 elements so 100/6 = 16.6666%. I should also not I removed the jQuery in the jsFiddles below.
http://jsfiddle.net/D8etp/1/
and
http://jsfiddle.net/D8etp/2/
CSS
body {
margin: 0;
}
#top-nav{
padding-top: 30px;
width: 940px;
}
#nav {
color: #FFF;
font-size: 12px;
margin: 0;
padding: 0;
text-transform: uppercase;
min-height: 49px;
background-color: #007369;
overflow: hidden;
}
#nav > li {
display: block;
float: left;
list-style-type: none;
margin: 0;
padding: 9px 0 0 0;
width: 16.6666666666%;
}
#nav > li > a {
display: block;
box-sizing: border-box;
text-align: center;
padding: 7px 12px 17px 12px;
line-height: 16px;
margin: 0 4px;
color: #fff;
text-decoration: none;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
overflow: hidden;
}
#nav > li > a:hover {
background: #b0a893;
}
#nav > li > a:hover {
text-decoration: none;
}