CSS - Header jumping when a div gets below the fold

Question

I have been really pulling my hair out on this.

Here's my issue: I have these two pages where the header with logo and login details should always stay at the same place. On one of the page I notice that the header moves depending on the length of a div I have underneath!

Here's the page:

http://presencepro.fr/speakspot/homepage-logged-out.html

If you remove a big chunk of the lorem ipsum text (so that everything fits in your viewport) you will notice that the header falls back into place where it should be. It's as if the fact that the div is too long has an influence on a div above.

What could be the problem?

You can compare side by side with this second page, this is where the header should always be:

http://www.presencepro.fr/speakspot/login.html

Many thanks for your time on this.

Guillaume

Answer 1

The problem is cause by the width of your screen being reduced by the scrollbar and therefore everything that is centre aligned is forced to move.

I would suggest you force the vertical scroll bar to always appear by using the following code in your CSS.

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}