Stop your page from shifting!

Posted on 10 January 2007 (02:36 PM)

You know content, right? When it gets really really long, your friendly browser provides you with a scrollbar so you can access that content.

But sometimes, your content is not really really long. Your browser then does not display a scrollbar, for it's superfluous. It's a great system, really, but it does make your content shift from left to right and back when you browse different pages.

Read on if you want to stop this from happening.

It's dead simple really. Just throw in the following CSS:

html { height: 100%; }
body { height: 100.1%; }
Download this code: /code/stop_your_page_from_shifting1.txt

That's it!

I know there are more challenging obstacles in web development, but this is something designers have asked me to do a couple times lately, so I thought I'd share.

Filed under HTML and CSS

← previous article: Fighting spam using MySQL and PHP
→ next article: New Dutch accessibility law

Comments:

1 10 January 2007 (08:31 PM) by jackline

is this tested on all browsers? which ones?

this comment has been quoted by Harmen Janssen
2 10 January 2007 (11:24 PM) by Harmen Janssen

jackline wrote:
is this tested on all browsers? which ones?

I have tested this method in

- Safari

- Firefox

- Netscape

- Opera

- IE versions 5.01 to 7

All browsers behave like they should, the only thing the different user agents don't agree on is how much 100.1% exactly is :)

For instance: in Internet Explorer 7 there is much more scrolling than in Firefox.
3 29 January 2007 (10:23 PM) by defje

I just always tell my clients; yeah i'm sorry that's just bc of the scrollbar.
4 01 March 2007 (12:37 PM) by danielpunt

For IE & FF you can use overflow-y: scroll; Too bad Safari and Opera doesn't support this property.

Whatstyle.net

By Harmen Janssen