title: div code css causing gray space on page
body: <p>So I created a page with basically three main div's. The first div (.test_page - div #1) at the top of the page is a picture. The second div (.iframe_page - div #2) is an iframe of another site. The third div (.footer_coverup - div #3) is another picture. </p>
  
  <p>Basically I wanted the top div (div #1) to cover up the header of the iframed site (div #2). I wanted the bottom div (div #3) to cover up the footer of the iframed site (div #2). </p>
  
  <p>My style.css coding is: </p>
  
  <pre><code>.test_page {
    top: -60px;
    z-index: 9998;
  }
  
  .iframe_page {
    top: -230px;
  }
  
  .footer_coverup {
    padding-top: 250px;
    padding-bottom: 250px;
    width: 1577px;
    visibility: visible;
    background-image: url(/wp-content/uploads/2015/06/119.png);
    position: absolute;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    top: -285px;
    z-index: 9999;
  }
  </code></pre>
  
  <p>However, there is now a gigantic gray space at the bottom of the page because I moved div #2 up and div #3 up using the code <code>top: -230px</code> for div #2 and <code>top: -285px</code> for div #3, as you can see in the code above.</p>
  
  <p>Does anybody know how to move a div up and have the footer follow, instead of there being a big gray space at the bottom of the page??</p>
  
  <p>Thanks for your help!</p>