title: div buttons are overlapping HTML
body: <p>I am trying to make an online portfolio for myself and I have a bottom container for the bottom half of the screen and I would like to place 3 buttons at the top of the container.  I have got it to work except when you resize the page.  When you shrink the page's width the buttons will overlap.  How can I stop them from overlapping?  I want them to go close together side by side but not overlap.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {
    margin-left: 33%;
    margin-right: 33%;
    text-align: center;
  }
  
  img {
    width: 15%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  #top,
  #bottom {
    position: fixed;
    left: 0;
    right: 0;
    height: 50%;
  }
  
  #bottom {
    border-top: 2px solid black;
    margin-left: auto;
    margin-right: auto;
    display: block;
    float: center;
    position: fixed;
    border: 2px solid black;
    padding: 15px;
    padding-bottom: 17px;
  }
  
  #navbuttons {
    border-top: 2px solid black;
    margin-left: auto;
    margin-right: auto;
    display: block;
    float: center;
    position: relative;
    border: 2px solid black;
    padding: 15px;
    padding-bottom: 10px;
  }
  
  #resumebutton {
    display: inline-block;
    position: absolute;
    top: 0%;
    left: 33%;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border: 2px solid black;
    border-radius: 20px;
    padding: 5px;
    background-color: #7dd7f5;
    text-align: center;
  }
  
  #coverletterbutton {
    display: inline-block;
    position: absolute;
    top: 0%;
    left: 46.5%;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border: 2px solid black;
    border-radius: 20px;
    padding: 5px;
    background-color: #7dd7f5;
    text-align: center;
  }
  
  #portfoliobutton {
    display: inline-block;
    position: absolute;
    top: 0%;
    left: 62.5%;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border: 2px solid black;
    border-radius: 20px;
    padding: 5px;
    background-color: #7dd7f5;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;title&gt;--Name Here-- Resume and Portfolio&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div style="height: 100%"&gt;&lt;/div&gt;
      &lt;div id="top"&gt;&lt;/div&gt;
  
  
      &lt;h1&gt;--Name Here--&lt;/h1&gt;
  
      &lt;img src="http://science-all.com/images/wallpapers/cat-pictures/cat-pictures-20.jpg"/&gt;
  
      &lt;h1&gt;Resume and Portfolio&lt;/h1&gt;
  
      &lt;div id="bottom"&gt;
        &lt;div id="navbuttons"&gt;
          &lt;div id="resumebutton"&gt;Resume&lt;/div&gt;
          &lt;div id="coverletterbutton"&gt;Cover Letter&lt;/div&gt;
          &lt;div id="portfoliobutton"&gt;Portfolio&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would provide an example if I knew how. </p>
  
  <p>Thank you</p>