Why is the page shifting to top with a container that has overflow:hidden?

Question

I'm facing a problem that's really strange. It's in every browser.

Everything is working correctly, until you try to go to a section using the hash ( like #contactUs in my page)... try this url : http://mahersalam.co.cc/projects/2011/#contactUs

You will see that the page SHIFTS 10px to the top. if you take off the hash, it works again.

I have a wrapper on the page (#container) that has overflow:hidden, I did it to make sure no scroll bars appear if the resolution change. If you remove the overflow property it works too.

I guess the shifting happens through the place of the scroll bar, but because it's hidden it's place only stays.

So does anyone knows how to fix this problem ?

Edit :

I found the solution and I wrote it down in the anwsers.

Answer 1

That sure is an aesthetically pleasing layout. Very nice.

Anywho, the overflow seems to be taking a chunk out of #headerWrap's top margin, and adding it to the bottom of the page for me, it's exactly 16 pixels.

Nothing I've tried, so far, has worked. Can you get it so that #container does not overflow horizontally?

---

Edit: Never mind; the following does not work...
Changing #container's style from overflow: hidden; to overflow-y: hidden; seems to work on Firefox is not a very robust solution.