title: CSS: containing five floated 20% elements with borders
body: <p>I'm trying to align five horizontal menu elements with 'float:left' next to each other inside a container that spans 80% of the screen and a minimum of 960px. For this, I had initially set their min-width to 192px (960/5) and their width to 20%, but quickly realized this does not play well with adding 1px borders, causing one of the buttons to be 'thrown overboard'.</p>
  
  <p>Changing the widths to 19.895333% and 191px, respectively, solved the issue, however this is clearly a hacky solution which also leaves an ugly space of 2-3 pixels at the right side of the menu.</p>
  
  <p>Is there a more elegant way to align these elements and account for the bonus width added by borders, padding etc? I have tried 'overflow:hidden' to simply hide whatever may poke outside the container, but this just hides the entire 5th button.</p>
  
  <p>A picture to illustrate the result:
  <img src="https://i.stack.imgur.com/Mthyk.jpg" alt="enter image description here"></p>
  
  <p>The html code:</p>
  
  <pre><code>    &lt;div class="menucontainer"&gt;
          &lt;div class="menutab" id="menutab_first"&gt;News&lt;/div&gt;
          &lt;div class="menutab"&gt;Game Guide&lt;/div&gt;
          &lt;div class="menutab"&gt;Articles&lt;/div&gt;
          &lt;div class="menutab"&gt;Media&lt;/div&gt;
          &lt;div class="menutab" id="menutab_last"&gt;Community&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The css code:</p>
  
  <pre class="lang-css prettyprint-override"><code>.menucontainer {
      height: 26px;
      margin-left: auto;
      margin-right: auto;
      border-width: 1px;
      border-style: solid;
      border-color: #303030 #101010 #000 #101010;
      border-radius: 0px 0px 8px 8px;
  }
  
  .menutab {               
      line-height: 26px;
      float: left;
      width: 19.895333%;
      text-align: center;
      min-width: 191px;
      border-right: 1px solid #202020;
      background-image: url('../img/menubutton2.png');
      background-size: 100% 100%;
      font-family: 'Cabin', sans-serif;
  }
  
  #menutab_first {
      border-radius: 0px 0px 0px 8px;
  }
  
  #menutab_last {
      border-right: 0px;  
      width: 20%;
      min-width: 192px;  
      border-radius: 0px 0px 8px 0px;
  }
  </code></pre>
  
  <p>Thank you in advance!</p>