CSS: Horizontal Centering Jumps in Firefox

This is one of those situation i think most developers find themselves running into somewhere down the line. You’ve created you CSS template using margin:0 auto and everything looks great in the different versions of IE, Firefox, Oprea, Safari etc but for some reason your centering starts to jump all over the place when you click between various pages in Firefox. What’s going on here then?…

The answer is quite simply, some browsers like Firefox don’t display vertical scroll bars unless required and as a result your template’s centering begins to jump around (16px to be exact) when you navigate between a page that has a height that requires scrollbars and one that doesn’t. Its obvious now, i hear you cry! Don’t worry, i did the same… Doh!

The Solution to Firefox Centering Issue

Don’t worry there’s a simple solution to this centering and as usual, CSS comes to the rescue. The solution is to force vertical scrollbars.

There’s actually a few different ways to fix this scrollbar issue but here’s my favourite:

html {
	overflow-y: scroll;

Last time i checked this centering fix worked in Firefox, Safari, IE6 and Opera.

Related Tutorials:

Mozilla Bespin – aka Code in the Clouds

Mozilla Bespin – aka Code in the Clouds

Mozilla labs are currently experimenting with a new online code editor they are developing called Bespin.

Bespin, also know as ‘Code in the Clouds’, uses HTML 5 to provide an online code editor environment for developers to code, store and share projects they are working on. Put simply, the concept is code and access from any machine, similar to Google Documents I guess.

I’ve been having a little play around to see what all the fuss is about and i must admit i like the idea. However, there’s a LONG way to go until we can hangup our Notepad, Vim or Dreamweaver boots.

Bespin Video

Try out Bespin

Wanna give Bespin a try? Go to the Bespin site and try the demo for yourself. Note, you’ll need Firefox 3 or a HTML 5 processing Web Browser.

Tom’s Thoughts on Bespin

I love the concept of the whole thing, coding and accessing development projects from anywhere would be a great thing to have. The idea of open source and sharing code with developers also gives hope, however, we need better functionality and interface intellisense for lazy people like me! Full credit to Mozilla for the insight and effort of this project, keep it up guys!