title: Document height taller because of position relative
body: <p>I am working with 2 divs positioned relative and overlapping each other with a position of top:-400px.</p>
  
  <p>All the content below it has a top of -800px so that the content pushes up. Everything displays fine how ever there is 800px of space at the bottom of the page because the browser still thinks that the content is that far down when it is actually -400px up.</p>
  
  <p>Help?</p>
  
  <p>Here is my code for you to view : <a href="http://theproagency.com/WeddingHub" rel="nofollow noreferrer">http://theproagency.com/WeddingHub</a></p>
  
  <p>I am looking for a CSS fix - I can already fix this with JS with 
  document.height = document.height - 800px or w.e</p>
  
  <p>All help appreciated.</p>
  
  <p>Thanks</p>
  
  <p>p.s. I also would like to know how to fix this in all situations. What if this happens in future situations when I am building websites? I thought I was experienced at building websites but this one has caught me in a pickle</p>