title: How to stop text going past footer?
body: <p>If I put a lot of text in my  element, the text flows past my footer. How can I make my footer stay at the bottom regardless if there is a lot of text or no text.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Test Site&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="practice_1.css"
          media="screen"&gt;
          &lt;link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato|Orbitron|Open Sans"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;header&gt;
              &lt;nav&gt;
                  &lt;div class="siteName"&gt;
                      &lt;h1&gt;Website Name&lt;/h1&gt;
                  &lt;/div class="siteName"&gt; 
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Shop&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;View Cart&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/header&gt;
  
          &lt;section&gt;
              &lt;article&gt;
                  &lt;p&gt;
                  &lt;/p&gt;
              &lt;/article&gt;
          &lt;/section&gt;
  
          &lt;footer&gt;    
              &lt;small&gt;&amp;copy; 2014 Name. All rights reserved.&lt;/small&gt;
          &lt;/footer&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is my CSS:</p>
  
  <pre><code>* {
  margin : 0;
  padding : 0;
  border : none;
  }
  
  body {
  font-family : 'Open Sans', serif;
  background-color : #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  }
  
  .siteName {
  float: left;
  padding-top: 15px;
  padding-bottom: 15px;
  color: #FFFFFF;
  margin-left: 300px;
  font-size: 1.4em;
  font-family: Orbitron;
  font-weight: 700;
  }
  
  nav {
  background-color : #212121;
  text-align : right;
  }
  
  nav ul li {
  display : inline-block;
  list-style-type : none;
  transition: all 0.2s;
  }
  
  nav &gt; ul &gt; li &gt; a {
  color : #FFFFFF;
  display : block;
  line-height : 40px;
  padding : 0 25px;
  text-decoration : none;
  font-size : .95em;
  padding-top: 15px;
  padding-bottom: 15px;
  font-weight: 400;
  font-family: Lato;
  }
  
  nav &gt; ul &gt; li:hover &gt; a {
  color : #666;
  }
  
  section {
  margin-top : 50px;
  margin-left : auto;
  margin-right : auto;
  width: 80%;
  }
  
  footer {
  text-align : center;
  background-color : #212121;
  color: #FFFFFF;
  height: 150px;
  position: absolute;
  bottom: 0;
  width: 100%;
  }
  </code></pre>
  
  <p>Any help would be appreciated!</p>
  
  <p>EDIT: Sorry if I wasn't clear earlier, this is what happens when I add too much text. </p>
  
  <p><a href="http://imgur.com/AvgPVws" rel="nofollow">IMGUR link</a></p>