Your page is slipping off the screen!

When viewing your page in a Gecko browser (Netscape, Mozilla, Firebird, Firefox1) and narrowing the window to less than your page's width, the content starts slipping off the left side, and the scrollbar doesn't let you get to it.

Obviously, this is not what you want.

It is caused by the text-align:center value on the parent element, usually the body.

There are two ways of preventing the loss of content;

  • putting a border around the centered page
  • setting a min-width to the page

A border around your page

In Gecko browsers, a simple border around your page will stop the page moving further to the left than it should.

Simply write

		border:1px solid white;

in your stylesheet. (if the div has id="container" of course ;-) )

If you think a border on your page looks ugly, set it to the same colour as your background, or else, use the second option. Don't use color:transparent, as it will look grey in Internet Explorer.

Setting min-width

Let's assume your page is contained in a div with id="container".
Just add


to your styles (if your page is 700px wide).

The min-width property is not supported by Internet Explorer, but in this case, this is far from important, as we are merely using it to solve a problem which only occurs in Gecko browsers.

1) Firefox version 0.9 doesn't have this problem anymore.