Das folgende Senario dürfte dem einen oder anderen Webdesigner bekannt vorkommen: man hat ein schönes zentriertes Layout angelegt, aber einige Seiten haben natürlich weniger Inhalte, als andere Seiten. Zum Beispiel die Kontaktseite ist häufig so ein Kandidat.

Also – alles ist schön pixelgenau positioniert, nur die einen Seiten haben eine Scrollbar, andere Seiten haben keine Scrollbar. Grundsätzlich ist das nicht weiter schlimm – in vielen gängigen Browsern ist auch nichts weiter auffällig. In manchen Browsern aber wackelt das Layout – es springt je nach Browser und Betriebssystem bzw. eben je nach Breite der Scrollbar ein paar Pixel nach links wenn eine Seite aufgerufen wird, die aufgrund ihrer Länge eine Scrollbar benötigt –  bzw. nach rechts, wenn eine Seite aufgerufen wird, die aufgrund ihrer Länge keine Scrollbar benötigt.

Es gibt einen einfachen CSS-Trick, um dieses Hin- und Herspringen zu vermeiden: man erzingt einfach der Platz, den eine Scrollbar benötigt. Hier die entsprechende CSS-Anweisung:

html {
    overflow-y: scroll;
}

Das ist zwar eigentlich kein gültiges CSS – aber es funktioniert. Jedenfalls bei fast allen Browsern – wie bei css-tricks.com nachzulesen ist verweigern ältere Opera-Versionen die Kooperation.