Why are these two pages displaying differently?

Question

Homepage About page: /about.html CSS: /saucy.css

I'm sure I'm overlooking something obvious, but I can't seem to find it.

Both of these pages stem from the same HTML skeleton and use the same CSS file for formatting. Why does the About page centre differently to the homepage?

Thanks!

Answer 1

They center the same for me, but I suspect that for you it's because of the scroll bar. The home page is taller, so the scroll bar on the right pushes everything left. The about page has no scroll bar so it's actually in the middle of the screen.

Answer 2

Your Homepage has enough content that it gets a vertical scrollbar, but your About page does not. (The same thing was going on here: http://stackoverflow.com/questions/3408072/css-pages-not-equal-even-with-the-same-css-file/3408217#3408217.)

Here are some options to consider:

• Add overflow:scroll; to each page's stylesheet, (on the body element, for example). A scrollbar will always be rendered even when it's not necessary, and your layout will not move around.
• Don't center your content; specify a left margin in ems or pixels.