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