Numéro de conception réactif CSS

Question

Je crée un site web réactif; ce qui signifie qu'il redimensionne avec la fenêtre. Ça allait bien jusqu'à ce que j'atteigne la barre de navigation, qui a une courbe de 15px sur les coins inférieurs gauche et droit et a une largeur de 100%. Je veux placer deux divs 20px que j'appelle NavCap de chaque côté de la div Nav (qui agit comme un wrapper). C'est facile et cela me permet d'espacer les boutons et d'ajouter des images à la fin. La section du milieu appelée NavAction aura une image de fond répétitive 1px afin qu'elle se charge très rapidement sur un serveur cruddy.

Le problème est que NavAction doit prendre autant d'espace que possible sans pousser le bon NavCap sur la prochaine ligne cachée. Voici mon 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

Ne pas avoir deux id avec la même valeur de navCap.

Au lieu de donner la navAction une largeur, lui donner une valeur left et right à la place:

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

Ensuite, définissez vos casquettes comme ceci:

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

Answer 2

Voici une autre solution simple:

<div id="nav"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div> 

#nav { 
    width: 100%; 
    height: 55px; 
    position: relative; 
    overflow: hidden; 
    -webkit-border-radius: 0px 0px 15px 15px; 
    -moz-border-radius: 0px 0px 15px 15px; 
    border-radius: 0px 0px 15px 15px; 
    background-color: green; 
} 
#nav * { 
    box-sizing: border-box; 
    height: 100%; 
} 
.left, 
.right { 
    width: 20px; 
    height: 55px; 
    position: absolute; 
    background-color: blue; 
} 
.left { 
    left: 0; 
} 

.right { 
    right:0; 
}