title: Trying to recreate Google homepage (HTML/CSS), Can't get footer to stay at bottom
body: <p>Keep getting this (Red is the footer bar) Any advice on getting rid of it? Saw some code online to keep footer at bottom, tried it but it keeps appearing at the middle of the screen. This is for a project trying to copy the look of Google (no need for functioning search). First time attempting something like this, a bit lost. </p>
  
  <p>The Red is the footer (covering the search bar)</p>
  
  <p><img src="https://i.stack.imgur.com/VWmGX.png" alt="screenshot"></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="wrapper"&gt;  
          &lt;div id="trio"&gt;
              &lt;div class="triple" id="You"&gt;
                  &lt;a href="google.com"&gt;+You&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="triple" id="Gmail"&gt;
                  &lt;a href="gmail.com"&gt;Gmail&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="triple" id="Images"&gt;
                  &lt;a href="google.com"&gt;Images&lt;/a&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;img src="https://www.google.com/images/srpr/logo11w.png"&gt;
          &lt;div id="search"&gt;
              &lt;input class="searchbar" type="text" maxlength="2048" value="Say &amp;quot;Ok Google&amp;quot;"&gt;
          &lt;/div&gt;
          &lt;div id="buttons"&gt;
              &lt;input id="googlesearch" value="Google Search"type="submit"&gt; 
              &lt;input id="secondbutton" value="I'm Feeling Lucky" type="submit"&gt; 
          &lt;/div&gt;
          &lt;div id="footer"&gt;   
          &lt;div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>
  
  <pre><code>img {
  display:block;
  width:269px;
  height:95px;
  margin: auto;
  margin-top: 80px;
  padding-top: 112px;
  }
  
  .triple {
  font-family: Arial;
  font-size: 13px;
  display: inline-block;
  margin-right:0;
  }
  #trio a {
  text-decoration:none;
  color: #404040;
  ;
  
  }
  #trio a:hover {
  text-decoration: underline;
  }
  #Gmail, #Images {
  padding-left: 15px;
  }
  #search {
  width: 400px;
  height:28px;
  margin:auto;
  padding-top:30px;
  text-align: right;
  }
  .searchbar {
  margin:auto;
  display:block;
  width:100%;
  text-align: right;
  }
  #buttons {
  height:22;
  width:250px;
  margin:auto;
  display:block;
  }
  
  #wrapper {
  min-height:100%;
  position: relative;
  
  }
  
  #footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;
  background-color: red;
  clear:both;
  display:block;
  
  }
  </code></pre>