title: Can't get my footer to go to the bottom of the page
body: <p>I have a footer on page and then I want to place a few divs above it but for some reason the footer seems to come up beside this divs instead of below it</p>
  
  <p>I want the main footer to be above the footer</p>
  
  <p><p>here is my code</P></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id ="mainfooter"&gt;
  
  &lt;div id = "links"&gt;
  
  &lt;h2&gt;Quick Links&lt;/h2&gt;
  
  &lt;/div&gt;
  
  &lt;div id ="sunday"&gt;
  
  &lt;h2&gt;Join us this Sunday&lt;/h2&gt;
  
  &lt;p&gt;11am &amp;amp; 6:30pm&lt;/p&gt;
  
  &lt;/div&gt;
  
  &lt;div id="findus"&gt;
  
   &lt;h2&gt;Find Us&lt;/h2&gt;
  
   
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div id="footer"&gt;
  
  &lt;p id="copyright"&gt; &amp;copy; &lt;span id="copyright_span"&gt;&lt;/span&gt; Elim Church&lt;/p&gt;
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>here is my css</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> #links
  {
      padding-left: 20px;
      color: #000;
      width: 150px;
      float: left;
  }
  
  #sunday{
      padding-left: 100px;
      width: 200px;
      color: #000;
      float: left;
  }
  
  
  #findus{
      padding-left: 100px;
      color: #000;
      width: 200px;
      float: left;
  }
  
  #mainfooter
  {
      padding-top: 50px;
  }
  
  
  #footer {
      
     padding-top: 50px;
      padding-left:100px;
     background:#F3EFE0;    
   
      padding-bottom:40px;
      }</code></pre>
  </div>
  </div>
  </p>