title: How to create a footer in html document
body: <p>Before I explain the problem, just let me say that I have searched quite a bit on Google and read several Stack Overflow replies in addition to trying stuff out, it doesn't quite work.</p>
  <p>Another HTML footer question, but I don't seem to find the answer to my question even though there seems to be many questions about this; it's either really odd solutions without explanations or solutions that doesn't work if you add for example another form to the site on the same page (footer goes below the layout box border line).</p>
  <p>I'm trying to create the footer to have it stick at the end of the document, I've tried the following:</p>
  <pre><code>margin-top: 100px
  </code></pre>
  <p>Well that did work until I added more content to the page, the footer is pushed below the layout border line. Then I tried setting the footer as a relative position with <code>position: relative</code> but that just kept the footer on the middle of the page.</p>
  <p>My CSS code:</p>
  <pre><code>.box {
  background-color: white ;
  height: 800px ;
  width: 600px ;
  margin: 0px auto ;
  border: 1px solid black ;
  }
  
  .header {
      text-align: center ;
      padding-left: 5px ;
  }
  
  .navigation {
  text-align: center ;
  font-size: 16px ;
  font-family: verdana ;
  }
  
  .content {
  font-size: 18px ;
  font-family: verdana ;
  padding-left: 10px ;
  }
  
  .contactForm {
  font-size: 16px ;
  font-family: verdana ;
  }
  
  .footer {
  margin-top: 100px ;
  text-align: center ;
  font-size: 16px ;
  font-family: verdana ;
  width: 600px ;
  height: 50px ;
  background-color: #f6f6f6 ;
  }
  </code></pre>
  <p>My HTML code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;testing.css&quot; type=&quot;text/css&quot;&gt;
  &lt;/head&gt;
  &lt;body bgcolor=&quot;#f6f6f6&quot;&gt;
      &lt;div class=&quot;box&quot;&gt;
          &lt;h3 class=&quot;header&quot;&gt;My blog&lt;/h3&gt;
          &lt;hr/&gt;
      &lt;div class=&quot;navigation&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;Posts&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;
      &lt;/div&gt;
      &lt;hr/&gt;
      &lt;div class=&quot;content&quot;&gt;
          &lt;form class=&quot;contactForm&quot; action=&quot;#&quot; method=&quot;post&quot;&gt;
              &lt;table&gt;
                  &lt;tr&gt;&lt;td&gt;Contact&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;Name:&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;name&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;E-mail:&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;email&quot;&gt;&lt;td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;Message:&lt;/td&gt;&lt;td&gt;&lt;input type=&quot;textarea&quot; name=&quot;message&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;/table&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class=&quot;footer&quot;&gt;
          test
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Nothing seems to work and I got to say I'm starting to get kind of frustrated since I've been reading several guides and articles about this, but a lot of them just says that I have to set the width, height and the position to relative and doesn't show how you position them correctly.</p>
  <p>Can someone explain how to create a proper footer? Would be nice if there was an explanation to the code as well.</p>