css error - adding a banner messes up the scrollbar of the page

hi I have this simple CSS code to add a banner to a sharepoint 2010 site - the problem is, when I add it, the page doesn't 'recognize' the additional horizontal space added by the banner, and thus the sc开发者_开发技巧rollbar scrolls past the bottom of the page. This happens when windows is maximized as well as when it isn't. Happens in IE, chrome, FF.

EDIT: screenshot of browser scrollbar

banner code:

<div id="header_container">

</div>

css:

#header_container {
    background-image:url('/Images/topBanner.png'); 
    background-repeat:no-repeat; 
    background-color:#fff; 
    height:147px;
}

Try adding 1px padding and set the width. Im just learning but ive found sometimes wierd stuff happens when you add more code to a site. The 1px of padding has fixed some of my layouts

Also id recommend not using header_container as your div tag. Think about how many items you have in the header.

EG if i had a banner and site name but still needed a wrapping div i would use

<div id="header">
<div id="banner"></div>
<div id="headerlogo"></div>
</div>

or

<div id="headerbox">
<div id="banner"></div>
<div id="sitetitle"></div>
</div>