When I Add <DIV> Bottom Scroll Bar Appears, Even Though It Is Not Greater Than The Page Width

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 p开发者_如何学运维age 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.

Working fine on my computer.

Your browser client area may be smaller than 507+180+10+10+1+1 px (top + height + paddingTop + paddingBottom + borderTop + borderBottom) or 172+180+10+10+1+1 (horizontally).

EDIT

Your center image is 1025px wide. The client area in your browser window is less than that. You can

• Resize the window
• Buy a new monitor
• Design your site so overflow is OK
• Forcibly turn off overflow with overflow-x:hidden

what browser are you running this on? including the browser version? because i have ran it under Firefox 3.x and i don't see any problems.