Question

I have faced this problem on numerous sites I have developed, and now it seems that I am also experiencing it on my personal site. The problem is that if the contents of the page exceeds the height of the browser window, the navbar at the top is displaced from the position is should be in (it moves a couple of pixels left).

On the about and home page, since the contents of the page do not exceed the browser window, the navbar is displayed in the correct position. However, on the contact page, the form causes the position to move left, and I’m not sure why.

Thanks for all help/ideas in advance, I’ve been toying with this one for hours, and I think I must have made an oversight somewhere!

Answer 1

When the contents of the page no longer fit vertically, the browser adds a scrollbar to the right side of the window. This changes the available width in the browser window, so any content that is either centered or positioned relative to the right side of the window will move left a bit. This is very common.

There are a number of ways to control this, but the most common is to either make it so you always have a scrollbar or never have a scrollbar by controlling the overflow-y property on the window.

Setting overflow-y: scroll will force the scrollbars to always be there.

Setting overflow-y: hidden will force there to never be scrollbars.