overflow:hidden property is behaving strangely in Firefox / fine in Chrome/Safari

I have been searching the web for a solution for 3 hours without success. I am using this jQuery template: http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/ which seems pretty basic to me. Here is my page: http://coup-etat.com/fr/collectionNEW.html The main difference with the template is I replaced the images by divs.

The problem: none in Chrome/Safari, but huge in Firefox (I tried both 3.6 and 4): the slider is on the left side, outside the wrap div (#main), as if it didn't fit in.

I fooled around in Firebug, and turns out the problem disappears whe开发者_StackOverflow社区n I remove the overflow:hidden property of the #gallery div. However of course in that case all the slides appear all the time, which is not the intention.

So I know the culprit but for the hell of me I can't figure out why it's not working and how to find a work around.... The code is online so I guess it's not useful that I repost it here; but I can if necessary.

Thanks!

I didn't have time to take an in-depth look, but have you tried adding a "clear: both;" in your div#main?

try to add overflow:hidden; property to #main div, it should help a lot :)