problem with firefox 4 trackpad scrolling on macbook pro.

I am having lots of trouble with the layout of my site. Before you all jump on top of me for building an amateurish site, I have done it to the best of my knowledge. It is a centered layout with a fixed left column and the right column is an image section that has to scroll vertically, hiding under the header. The image area is defined by the following:

#imageswrap {
width: 589px;
padding-top:110px;
padding-left:401px;
height:100%;
z-index:-10;
}


within a container

#container {
position:relative;
width: 989px;
padding: 0px 20px 20px 20px;
margin: 0 auto;
}

The problem comes when I resize the browser to less than the width of the site. The image area starts to dance around below the fixed elements when controlled with the trackpad but this seems to happen only in firefox 4 and and when double finger scrolling on the trackpad. In the body I have declared

body {
overflow-x:hidden;
}

and this seems to do the trick on most browsers (haven't tried explorer) and it gets rid of the horizontal scrolling bars but it for anyone on firefox 4 on a mac laptop (which will be a lot of the audience of this site) it ruins the layout. Is there any way around this? Why is this happening to me??

You can find a working example here

http://test.venndiagram.eu/backbuttontest.html

and the stylesheet (ignore the stuff that doesn't apply here)

http://test.venndiagram.eu/murraycss-test.css

The reason you're encountering this problem is because you have fixed widths that are in my opinion too big. I'm assuming you're creating the site on a 1024x768px resolution screen. You should be making the WHOLE site centered and NEVER bigger then 800px wide. This will get rid of your problem right away.

Novice mistake, not a huge deal. Some code you might be interested in:

Way to make div box at the very TOP of the page and not have a padding or margin:
body {
margin: 0;
padding: 0;
}

Center a "MAIN" div box on all browsers:
#main {
margin: 0 auto;
}

Hopefully this will help.

Thanks,
J-

Hi jdswebservice, my website is already centred in a container. I am now also encountering this issue in another one of my sites too which isn't centred.

I have spent hours trying to google this issue and very few people seem to have talked about it mainly though this guy who describes a very similiar problem but with a horizontal overflow and he seems to have solved it.

http://stackoverflow.com/questions/5055705/css-firefox-mac-weird-vertical-scrolling-behavior-inside-div

Can someone help me apply his solution to my situation?