Hidden element causing scrollbar to appear when window goes below a certain width

I am having the weirdest problem. I'm trying to make a page that fits a resolution of:

width: 640;
height: 960;

for the iphone. But there is a hidden element that I can't access with the Developer toolbar or Firebug that is adding an extra 100pixels to the right of my page.

I've set the correct height and width for the html, body, and main containers but I'm still having the same issue.

You can replicate the problem by going to the following page and resizing your screen just below 740px wide. When you do this you see the horizontal scrollbar popup around 740 pixels. Here's an example page with the issue.

The scrollbar 开发者_开发百科shouldnt popup until the window is resized down to a 640 pixel width because thats what I have all the elements assigned to.

The main overall issue is that when viewed on the iphone4 there is a 100 pixel gap on the right side of the screen that no matter what i do I cant get rid of because some element is making the page 740px width instead of 640.

My boss and I have been working on this for hours and still cant figure out what is causing that extra 100 pixels on the right.

Any suggestions would be greatly appreciated.

Place overflow: hidden on your HTML CSS attributes. Not sure where that element is coming from, but that will prevent anything from making scroll bars appear.