I recently ran into a CSS problem with a centered fixed width layout. It’s probably been written about before and experienced web developers may already know this, but it caught me out. I’m reasonably experienced, so I thought it worth mentioning here.

The Problem: Fixed Width Centering Inconsistent

I’ve been developing a website for a client, which uses a fixed width layout. I know there are arguments against using fixed width layouts, but leave that aside for the moment. It was fixed width.

The site was centered, using margin:0 auto; on the body element.

Things were looking good, until I added the fourth page. Then I noticed that there was a slight offset, maybe about 8px, between the centering on some of the pages.

When navigating between pages, the whole page (including the menu) would jump slightly to the left or the right. This was annoying (and bad for usability) as the menu should be positioned consistently on all pages.

Browser Consistency: Problem In Firefox, But Not IE

I checked to see if this was consistent across different browsers. The problem occurred in Firefox and Chrome, but not in Internet Explorer.

I didn’t bother checking Opera or Safari, as I was pretty certain they’d be the same as Firefox and Chrome (especially in the case of Safari which shares the same browser engine as Chrome).

Tracking Down The Problem

I set out to track down the problem, but it was slippery. Some pages were fine, some slightly to the left. I seemed to be able to make the problem disappear through various methods: reducing the font-size, removing a paragraph, removing an image, reducing the bottom margin values.

However it was inconsistent: one of the above methods would fix the problem short term, but later the problem would be back and the method would no longer work. Then the penny dropped:

The problem was happening when the browser scrollbar was shown.

When calculating the size of the area to center the page in, it was using the full width for short pages (with no scrollbar) and the full width minus 17px for long pages (with scrollbar). So obvious in hindsight! My ‘solutions’ worked only because they shortened the page enough for the scrollbar to disappear.

The Solution: overflow:scroll

Fortunately, there was a simple solution: I added overflow:scroll to the body CSS element.

This will cause the scrollbar to always appear (if the page is wide enough), regardless of whether the page is long enough to actually need it. While this is annoying, it’s better than having the menus move around between pages.

_overflow:auto after overflow:scroll . body {height: 100%} html {height: 100%; margin-bottom: 1px;} This doesn’t work in IE6, so I addedafter Yurigoul suggests an alternative in the comments below:

Final Thoughts

Most sites I work with never have a page short enough for this problem to occur! In theory, the problem could occur on this very blog, but the sidebar is so long that the scroll bar will always be shown.

Have you ever been tricked by a CSS problem that has such a simple explanation in hindsight? If so, please share it in the comments!