title: How to create "padding-bottom" after boxes for footer?
body: <p>I am trying to simply put a footer at the bottom of my html page.  I have been unable to find a decent tutorial online mainly because my content, though simple, is not standard (i suppose).</p>
  
  <p>I have the following html code (just a testing page and not the real thing):</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;div id = "container"&gt;
  
  
  &lt;div id = "header"&gt;
  This is the header
  &lt;/div&gt;
  
  &lt;div id = "body"&gt;
  
  
  &lt;div class="IRL"&gt;
  &lt;div class="box"&gt;&lt;a href= ""&gt;&lt;img src="" width="100" height="100"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="box"&gt;&lt;a href= ""&gt;&lt;img src="" width="100" height="100"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="box"&gt;&lt;a href= ""&gt;&lt;img src="" width="100" height="100"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="box"&gt;&lt;a href= ""&gt;&lt;img src="" width="100" height="100"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="box"&gt;&lt;a href= ""&gt;&lt;img src="" width="100" height="100"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;div id = "footer"&gt;
  Testing footer
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The relevant content of "style.css" is then:</p>
  
  <pre><code>html,
  
  body    {
  margin: 0;
  padding: 0;
  height: 100%;
  }
  
  
  #container  {
  min-height:100%;
  position:relative;
  }
  
  #container {
  height:100%;
  }
  
  #body {
  padding:10px;
  padding-bottom:50px;   /* Height of the footer */
  }
  
  #footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:50px;   /* Height of the footer */ //This is from a tutorial
  }
  
  .IRL {
  
  position: absolute; top:50px; left:10px;
  }
  
  
  .IRL li{
  
  margin:0px 150px 0px 0px;
  list-style-type:none;
  
  }
  
  
  
  .box    {
  margin-top: 10px;
  padding: 5px 5px 5px 5px;
  border: 2px solid #000000;
  width:100px;
  height: 100px;
  color:#000000;
  }
  </code></pre>
  
  <p>The problem is the footer cuts through the boxes even when i get it to be at the bottom (after a bit of tinkering).  Basically does anybody know how to create a gap after the boxes?  I had thought the padding-bottom was supposed to do that?</p>
  
  <p>I hope i have been clear </p>
  
  <p>Many thanks in advance. Cheers.</p>