I have searched for this with no answer. My page loads up perfectly when I load the header, navigation and then center image...all 3 different divs. However I have more I need to add and the div tags change the size of the page even though the css I'm using isn't larger than the page. I have no idea what is happening.

Here's the code page where everything is fine:

http://www.thehdmgroup.com/midwaymissionary/test.php

When I add the below div tag with the below css I get a bottom scrollbar on the page and I don't know why. Can someone please explain it to me?

#middleTextBox1 {
    position: absolute; 
    top:507px; 
    left:172px; 
    width:180px; 
    height:180px; 
    background-color:#411b42; 
    border: 1px 
    solid #434343; 
    padding:10px; 
    color: #FFFFFF; 
    font-size: 10px; 
    font-family: Arial, Helvetica, sans-serif;
}

<div id="middleTextBox1">
  <h3 align="center">Mission:</h3>
  Words
</div>

I really have no idea why this is happening, could someone please help me out? Thanks for your time.