Tutorials, CSS, HTML

Avoiding pageshift by forcing a scrollbar with CSS

I've had a few people ask me about the same problem recently its a simple problem with a simple solution.

Ever noticed your page shift when using a central container when moving from page to page? chances are you have and the reason for this in most cases is due to some pages not having enough content for the browser to create a scrollbar and other pages having enough content so when moving pages the central container will adjust itself to be in the center of the available space, this can cause a slight shift on position.

The solution is to either have enough content to make a scrollerbar not an ideal solution its much easier to add a tiny bit of CSS to your stylesheets to force a scrollbar then you never need worry about the page shifting vertically.

html>body { overflow:scroll; }

That will force the browser to ensure there is always a scrollbar visible.

David Carr

David Carr

For the past 12 years, I’ve been developing applications for the web using mostly PHP. I do this for a living and love what I do as every day there is something new and exciting to learn.

In my spare time, the web development community is a big part of my life. Whether managing online programming groups and blogs or attending a conference, I find keeping involved helps me stay up to date. This is also my chance to give back to the community that helped me get started, a place I am proud to be apart of.

Besides programming I love spending time with friends and family and can often be found together going out catching the latest movie, staying in playing games on the sofa or planning a trip to someplace I’ve never been before.