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.

Answer 2

I believe the problem is that the fragment identifier causes the container to scroll before the page scrolls. After the page is complete the container element has a scrollTop value of "16".

Here's what I did in greasemonkey in Firefox to recover the missing area.

window.addEventListener('scroll', 
  function(e)
  { 
    var cont = document.getElementById("container");
    if ( cont.scrollTop > 0) cont.scrollTop = 0; 
  }, 
  false );

What that, when you scroll back to the top, the missing space is shown.

As a solution, I don't like it at all, but it demonstrates where your problem lies and maybe others can think of a cleaner way of fixing the container's scrollTop to 0.

Answer 3

The solution was to remove the height:100% from the .rightCol and .leftCol .

I guess that these sections were overflowing because of the height property.