Everything Overhanging Browser Window Disapears

I am having this weird problem. When you open the page it looks fine, but if you condense your browser window and use the horizontal scroll bar a problems appears. Whatever was overhanging the browser window in the background disappears.

http://dl.dropbox.com/u/14080718/testing/experiment3.html

I am pretty new to web design and there may be a better way to set this page up, so any suggestions anyone could give would be helpful. I have had a few developers look at it and they dont know what is going on either.

Hello NateG,
Width: 100%; is the width of the browser window when your site is loded. When you scroll past that, you're going past 100% so you just see the body background color.

Try not specifying a width and repeat your bg image on the x axis.

Thanks for the help.

Would you make the bars background images?

I tried to get rid of the width, but it just gets rid of the bars all together.

I have found that the width:100%; seems to work fine if I take the <nav> and <erasers> divs out. It also seem to work if I just delete the contents of <nav> and <erasers>. Not sure why. Could it be that the positioning is interfering with something?

http://dl.dropbox.com/u/14080718/testing/bars.html

Any ideas?

Would you make the bars background images?

I would, just for simplicity. That's a lot of work you're going through to put all that together when it could just be a logo and your h1 on top of a background image.