title: Keeping footer down with margin?
body: <p>I pretty much see to have all the bugs figured out so far, besides one... the footer, again, isn't attached to the bottom. I had to remove the relative and absolute method because the content would stretch under the footer. So I need some sort of way to expand the area between the content and footer dynamically to keep the footer on the bottom. Is there a way this can be done? I have a "box-divider" set to 100% height, but it doesn't seem to do anything. </p>
  
  <p>Live code here <a href="http://jordan.rave5.com/tmp/" rel="nofollow">http://jordan.rave5.com/tmp/</a></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>            #body {
                  transition: height 2s;
                  -webkit-transition: height 2s;
                  width: 74%;
                  min-width: 1024px;
                  height: auto !important;
                  margin: 0 auto;
                  margin-top: 20px;
                  margin-bottom: 20px;
                  padding: 10px;
                  background-color: #080908;
                   -moz-border-radius: 10px;
                  -webkit-border-radius: 10px;
                  -khtml-border-radius: 10px;
                  border-radius: 10px;
                  -moz-box-shadow: 0px 0px 6px #000;
                  -webkit-box-shadow: 0px 0px 6px #000;
                  box-shadow: 0px 0px 6px #000;
                  /* For IE 8 */
                  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000')";
                  /* For IE 5.5 - 7 */
                  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000');
              }
  
              #body-content {
                  display: none;
                  height: 100%;
              }
  
              #box-divider {
                  width: 75%;
                  min-width: 1024px;
                  height: 100%;
                  margin: 20px auto 20px;
              }
  
              #footer {
                  width: 100%;
                  height: 150px;
                  background-image: url(images/black-trans.png);
                  background-repeat: repeat;
                  padding: 0 0 20px;
              }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div id="background-overlay"&gt;
          &lt;div id="background-gradient"&gt;
  
              &lt;div id="header-image-grad"&gt;
  
                      &lt;div id="header-container"&gt;
                          &lt;div id="header"&gt;
                              &lt;div id="navigation-container"&gt;
                                  &lt;div id="navigation"&gt;
                                      &lt;span id="nav"&gt;Navigation Area...&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;div id="header-image-border"&gt;
                      &lt;img class="header-img" src="slides/fields.jpg" alt="Panoramic Fields" /&gt;
                      &lt;div class="image-grad"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;div id="body"&gt;
                  &lt;div id="body-content"&gt;&lt;/div&gt;
                  &lt;div class="loading"&gt;&lt;img src="images/loading.gif" alt="Loading Content" /&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div id="box-divider"&gt;
                  &amp;nbsp;
              &lt;/div&gt;
  
              &lt;div id="footer"&gt;
                  &lt;br /&gt;
                  &lt;div id="footer-content"&gt;
                      Footer Area...
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>