Hash(#) Link Causes Content To Jump - Why?

Ok, so usually I'm pretty good with CSS. But this one... I can't quite wrap my ahead around why it's occurring. I did find a couple of 'quick fixes', but I don't want to just do s

Solution 1:

The problem with your code is the fixed height on the #container. The content is greater than the 1000px you had set. When the page is jumping to the #content section its moving down the browser focuses on the content section which fills the entire 1000px. If you set height:auto on the #container it'll work. This will allow you to keep the overflow: hidden

Solution 2:

Your problem is with the overflow:hidden; You want this

overflow-x:hidden;

Otherwise they won't be able to read anything on your site.. The overflow-x will stop the horizontal scrolling.