title: Responsive footer displayed over parts of content when shrinking browser
body: <p>I am fairly new to CSS and HTML.</p>
  
  <p>And I understand that this question has been asked several times, yet I cannot seem to fix my current issue. </p>
  
  <p>I have been working on little small projects like trying to recreate other websites with extra features.</p>
  
  <p>My current task is recreating a front page search area, such as google.</p>
  
  <h2>Implementation and Issue</h2>
  
  <p>I have been focusing in the responsiveness of websites when a browser resize occurs, so I have been using <strong>Flexbox</strong> as often as possible.</p>
  
  <h3>Implementation</h3>
  
  <p>A main div with a container id, with a min-height of 100% and a relative position.</p>
  
  <p>Inside the container div are nav(#nav), center(#center) and footer(#footer) elements and their respective id's.</p>
  
  <ul>
  <li><strong>nav</strong>: a flex display, baseline align-items and min-height of 9vh.</li>
  <li><strong>center</strong>: a width of 100%, and a min-height of 10vh;</li>
  <li><strong>footer</strong>: absolute position, bottom <strong>0</strong>, width of 100%</li>
  </ul>
  
  <p>I have made some research into the Footer and how to keep it at the bottom  of a page while being responsive when shrinking the browser, but I seem to have come to a halt or possibly I haven't fully understood yet how to get the footer to stop at a certain element.</p>
  
  <h3>Issue</h3>
  
  <p>The issue is that I cannot get the footer to function correctly. I do not wish it to overlaps with the bottons and links in the main content. It stops at the search bar when resizing the browswer, but I would like it to stop when it meets the buttons. </p>
  
  <p>As you will see from the block of code snippets in the JSbin link, I have an issue with the footer.</p>
  
  <p><strong>Current HTML + CSS files and output</strong>: <a href="http://jsbin.com/kojasimeco/edit?html,css,output" rel="nofollow noreferrer">JSBin</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
      margin: 0px;
      padding: 0px;
  }
  html, body {
      height: 100%;  
  }
  
  #container {
      min-height:100%;
      position:relative;
  
  }
  
  a:visited{
      color: #609;
  }
  
  /* ----- Navigation Styling ----- */
  
  #nav {
      display: flex;
      border: 10px solid  goldenrod;               /*Colourful Borders*/
      min-height:9vh;
      justify-content:flex-end;
      align-items: baseline;
      background:#ff0;
      padding:10px;
  }
  
  /*Nav Content*/
  
  /* ----- Center Styling ----- */
  
  #center {
      width: 100%;
      background-color: white;
      min-height:10vh;     
  }
  
  .ctr_img {
      height: 92px;
      width: 272x;
      padding-top: 20px;
      
  }
  .ctr_img:hover {
      -webkit-filter: invert(100%);
  }
  
  .img_mic {
      padding: 0 8px;
      float: right;
      display:inline-block;
      top: -30px;
      position: relative;
  }
  
  .srch_bx {
      border-style: hidden;
      box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
      max-width: 40%;
      min-height: 40px;
  }
  
  .srch_in {
      width: 100%;
      border-radius: 2px;
      border: none;
      overflow: auto;
      outline: none;
      left: 0px;
      background: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D) transparent;
      font: 16px arial,sans-serif;
      display: inline-block;
      text-align: start;
  }
  
  .mic_set {
      background-size: 30px 30px;
      height: 100%;
      width: 26px;
  }
  
  .btn_sbmt {
      padding: 20px 50%;
      min-height: 20px;
      display: flex;
      justify-content: center;
  }
  
  .btn_srch, .btn_lcky {
      background-color: #f2f2f2;
      border: 1px solid #f2f2f2;
      border-radius: 2px;
      color: #757575;
      font-family: arial,sans-serif;
      font-size: 1vw;
      font-weight: bold;
      margin: 11px 4px;
      padding: 0 16px;
      height: 36px;
  }
      
  .lang_diff{
      max-height: 28px;
      font-size: 0.9vw;
      margin-bottom: 24px;
      font-family: arial,sans-serif;
  }
  
  /* Footer Styling */
  
  #footer {
      position:absolute;
      bottom:0;
      height: 5.2em; /* Height of the footer */
      width: 100%;
      min-height: 10vh;
      background-color: #f2f2f2;
      line-height: 40px; /*Specifies the line height.*/
      min-width: 400px;
  
  
  }
  
  .ctry {
      display: flex;
      margin-left: 30px;
      text-align: left;
      color: rgba(0,0,0,.54);
      border-top: 1px solid #e4e4e4;
      max-width: 150px;
  }
  
  .ctry_ftr {
      font-size: 1vw;
  }
  
  .opt_ftr {
      display: flex;
      justify-content:space-between;
      border:  1px solid #e4e4e4;
  }
  
  span.blft_ftr a, span.brght_ftr a, span.brght_stg a {
      text-decoration: none;
      color: #666;
      margin-left: 16px;
      font-size: 1vw;
  }
  
  .brght_ftr{
      margin-right: 30px;
      float: right;
  }
  
  .adv_ftr {
      padding: 0 16px;
      text-decoration: none;
      display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Testing Ground&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="reset.css" /&gt;
          &lt;link rel="icon" href="http://www.favicon.cc/logo3d/53653.png" /&gt;
          &lt;meta charset="UTF-8"&gt;
      &lt;/head&gt;
      &lt;body&gt;  &lt;!--FLEX--&gt;
          &lt;div id="container"&gt; &lt;!-- Added New for Footer behaviour --&gt;
              &lt;nav id="nav" class="nav_cls"&gt;
                  &lt;!--Currently at work--&gt;
                  &lt;p&gt;Navigation Bar Content&lt;/p&gt; 
              &lt;/nav&gt;
              &lt;center id="center"&gt;
                  &lt;a class="img_link" href=""&gt;
                      &lt;img class="ctr_img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/250px-PM5544_with_non-PAL_signals.png" alt="image"&gt;
                  &lt;/a&gt;
                  &lt;div class="in_forms"&gt;
                      &lt;div class="srch_bx"&gt;
                          &lt;form&gt;
                              &lt;input class="srch_in" type="text" name="search"/&gt;
                          &lt;/form&gt;
                          &lt;div class="img_mic"&gt;
                              &lt;a href="https://youtu.be/Ye8mB6VsUHw "&gt;
                                  &lt;img class="mic_set" src="https://cdn.sesamestreet.org/sites/default/files/1496328210/Cookie_Big.png" /&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;div class="btn_sbmt"&gt;
                          &lt;input class="btn_srch" type="submit" value="Don't Hide me!" name="search"/&gt;
                          &lt;input class="btn_lcky" type="submit" value="Seriously, Don't!" name="luck"/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="lang_diff"&gt;
                      Links:
                      &lt;a class="lang" href=""&gt;Link1&lt;/a&gt;
                      &lt;a class="lang" href=""&gt;Link2&lt;/a&gt;
                      &lt;a class="lang" href=""&gt;Link3&lt;/a&gt;
                      &lt;a class="lang" href=""&gt;Link4&lt;/a&gt;
                      &lt;a class="lang" href=""&gt;Link5&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/center&gt;
              &lt;footer id="footer"&gt;
                  &lt;div class="ctry"&gt;
                      &lt;span class="ctry_ftr"&gt;
                          First half of a footer 
                      &lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="opt_ftr"&gt;
                      &lt;span class="blft_ftr"&gt;
                          &lt;a class="adv_ftr" href=""&gt;Footer Link 1&lt;/a&gt;
                          &lt;a class="adv_ftr" href=""&gt;Footer Link 2&lt;/a&gt;
                          &lt;a class="adv_ftr" href=""&gt;Footer Link 3&lt;/a&gt;
                      &lt;/span&gt;
                      &lt;span class="brght_ftr"&gt;
                          &lt;a class="adv_ftr" href=""&gt;Footer Link 4&lt;/a&gt;
                          &lt;a class="adv_ftr" href=""&gt;Footer Link 5&lt;/a&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/footer&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>Visited Websites</h2>
  
  <ul>
  <li><p><a href="https://stackoverflow.com/questions/19865705/footer-is-displayed-over-content-i-need-it-always-on-the-bottom-of-the-page">Footer is displayed over content. I need it always on the bottom of the page</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/10319377/html-css-sticky-footer-displays-over-content-on-screen-resize">HTML, CSS - Sticky footer displays over content on screen resize</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/19865705/footer-is-displayed-over-content-i-need-it-always-on-the-bottom-of-the-page">Footer is displayed over content. I need it always on the bottom of the page</a></p></li>
  <li><p><a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page" rel="nofollow noreferrer">How to keep footers at the bottom of the page</a></p></li>
  <li><p><a href="https://css-tricks.com/snippets/css/sticky-footer/" rel="nofollow noreferrer">Sticky Footer</a></p></li>
  <li><p><a href="http://doctype.com/footer-overlaps-main-content-when-window-shrunk" rel="nofollow noreferrer">Footer overlaps main content when window shrunk</a></p></li>
  </ul>