How can I make a floating nav-bar's width act fluidly with the rest of the website?

Question

I am constructing a website based off the 1140 CSS Grid, which is an entirely fluid grid set to a max-width of 1140px. I have laid what is going to become a nav bar over this layer that extends five pixels further on each side (for everyone's favorite 'ribbon' design effect) and would like the middle 1140px (of the now 1150px nav) to be adjust width along with the grid below it. Everything I have tried thus far, however, has not worked. Anyone have any ideas?

HTML:

<div class="float">
<div class="nav">
    <div class="navleft">
    <img src="images/banneredgel.png"/>
    </div>
    <div class="navbar">
    </div>
    <div class="navright">
    <img src="images/banneredger.png"/>
    </div>
</div>
</div>

CSS:

.float {
width: 100%;
display: inline block;
overflow: hidden;
position: fixed;
}

.nav {
width: 100%;
height: 43px;
max-width: 1150px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}

.navleft {
float: left;
width: 5px;
height: 43px;
}

.navbar {
float: left;
width: 100%;
max-width: 1140px;
height: 38px;
background-color: #6fd0f6;
}

.navright {
float: left;
width: 5px;
height: 43px;
}

Answer 1

I was able to take the code Thinking Sites offered and altered it a number of lines more in order to get something that hovers over the center while the width is less than the browser (ribbons on the edges) and then turns into a bar when the site fluidly adjusts to a smaller browser width.

HTML:

<div class="float">

        <div class="navleft">
        <img src="images/banneredgel.png">
        </div>

        <div class="navbar">
        <img src="images/logo.png" class="logo"/>
        </div>

        <div class="navright">
        <img src="images/banneredger.png">
        </div>
</div>

CSS:

.float {
width: 100%;
max-width: 1140px;
height: 38px;
position: fixed;
}

.navbar {
background-color: #6fd0f6;
height: 38px;
padding-left: 5px;
padding-right: 5px;
}

.navright,.navleft { 
width: 5px; 
height: 43px;
position: absolute;
top: 0px;
}

.navleft{
left: -5px;
}

.navright{
right: -5px;
}

Answer 2

I created a JS fiddle with your answer. http://jsfiddle.net/thinkingsites/Vz4TC/3/

Your problem is that the width 100% doesn't allow for the two bits on the side, so when your page shrinks it wraps the children of .nav

What I did was position them absolutely in .nav and gave .navbar a left and right margin to allow for the ribbons WITHOUT setting it to width:100% as that would push the ribbons away. I've also set the max width of .nav to 800 and the nav never expands beyond that.