Question

I am making a reactive website; meaning it re-sizes with the window. It was going well until I hit the navigation bar, which has a 15px curve on the bottom left and right corners and has a width of 100%. I want to place two 20px divs i call NavCap on either side of the Nav (which acts as a wrapper) div. This is easy and allows me to space the buttons and add images the the ends. The middle section called NavAction will have a 1px repeating background image so that it loads super fast on cruddy server.

The problem is that NavAction needs to take up as much space as possible without pushing the right NavCap onto the next, hidden line. Here is my code:

#nav {    
   width: 100%;
   height: 55px;
   position: relative;
   bottom: 0;
   overflow: hidden;
   background-color: #020202;
   -webkit-border-radius: 0px 0px 15px 15px;
   -moz-border-radius: 0px 0px 15px 15px;
   border-radius: 0px 0px 15px 15px;    
}

#nav * {    
   box-sizing: border-box;
   height: 100%;    
}

#navCap {    
   width: 20px;
   height: 55px;
   float: left;
   background-color: blue;    
}

#navAction {    
   width: 97.91%;
   height: 55px;
   float: left;
   padding: 0;
   background-color: green;    
}

        <div id="nav">                
            <div id="navCap"></div>                
            <div id="navAction">

            </div>                
            <div id="navCap" class="right"></div>

        </div>

Answer 1

Don’t have two id’s with the same value of navCap.

Instead of giving the navAction a width, give it a left and right value instead:

#navAction {
    position         : absolute;
    left             : 20px;
    right            : 20px;
    top              : 0;
    height           : 55px;
    background-color : green;
}

Then set your caps like so:

#navCapLeft, #navCapRight {
    width            : 20px;
    height           : 55px;
    position         : absolute;
    top              : 0;
    background-color : blue;
}
#navCapLeft {
    left : 0;
}
#navCapRight {
    right : 0;
}