Centered Fixed Width Layout And Scrollbar Problem

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.

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

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!

23 responses on “Centered Fixed Width Layout And Scrollbar Problem

  1. Kevin@Best Dating Sites

    It is actually surprising this doesn’t happen more frequently. A fixed width, centered website with different length pages wouldn’t be uncommon, would it?

    Anyway, thanks for the tip and I’ll know the solution if I come across it. Thanks

  2. John @ Maryland Real Estate

    Good tip on the scrollbar issue. I absolutely hate having to track down issues like this. Just such a pain and waste of time in my opinion.

  3. Yurigoul

    I always use a body {height: 100%} html {height: 100%; margin-bottom: 1px;} It is the margin-bottom that triggers the scrollbar. Could be that the body declaration is not neccesary.

    1. Mike

      Yurigoul, your solution probably works because the html 100% fills the entire page, and then the 1px margin would extend below the bottom, forcing a scroll bar.

      This is a great catch, I’m surprised I haven’t ever noticed this. I think using overflow is the best option, since it probably doesn’t happen often enough, but you won’t want to forget!

  4. Caroline@no debit card loans

    I prefer centered fixed width sites, one of the problems I am looking for a solution to is getting nested divs to fill 100% or their parent divs. It’s driving me mad.

  5. Frank@BMW Headlights

    It shows that whenever you have large information to show on your web page always use overflow:scroll to maintain consistency in website.

  6. Roma@PR consultant London

    Ah, thank you. That makes sense. I’ve used a wordpress template and saw this in the code and didn’t know what it was for. Here’s an elementary tip but some people might not have thought of it: keep your site hex colours at the top of your CSS

  7. Jon@Beauty Salon Marketing

    Ahhh thanks for that Stephen. I’ve had the same problem with a WP layout on a new site where some of the pages don’t have much content yet. Now I know how to fix it!

    Cheers, Jon

  8. John@best ps3 deals

    A little tip to avoid browser inconsistencies is to use what is know as a ‘reset.css’ stylesheet. Yahoo provides one and what it does is resets all of the default styling so that all browsers will show your pages nearly exactly the same. There is of course still a few little problems with IE but thats to be expected :)

  9. tony@Web hosting ireland.

    Nice simple fix. That is a good fix for the problem. I have not seen too many people still use fixed width anymore but i am sure someone some where is having a problem with a site because of the same thing.

  10. Theo@Website Design

    It seems that the W3 CSS validator is not too fond of the overflow:scroll element. It marks it as CSS3 and thus invalid for a CSS2.1 website. Strange thing is that all browsers seem to handle it perfectly..

  11. rafaat

    Its amazing that sometimes even very complex problems have the simplest solution. Well I am a newbie in wp theme designing, and I sure will keep this tip in mind.
    Thanks.

  12. Mark@arcade games

    I wouldn’t cry if CSS would disappear from the Earth. I spent countless of days trying to fix simple layouts which work in one browser but not another.

  13. custom logo design

    Many of the concepts that will follow rely heavily on the works of Karl Weick and Robert Quinn, presented in the book “Dynamics of Organizational Change and Learning (2004).” Similar to organizational development, SEO can be seen as a change process as well

  14. Daniel@ Bad Credit Loans

    I use to build websites from scratch using old school HTML, no CSS. Then I started using CSS and it took a long time to get it right. Once I did I was able to shrink my page size down big time, create faster loading pages and my rankings/traffic actually increased.

  15. Ecommerce Development Company

    Glad I found your post! I actually like Yurigoul’s solution better because it does not add a horizontal scroll bar along the bottom of the browser. (wasted real estate IMHO).

    I just came across this problem and now its fixed :)

    Both solutions work well none the less!

  16. Gordon

    Great! Helped solve my problem. I used
    body { overflow-y: scroll }
    as I didn’t need the lower scrollbar but same idea.
    Nice one!

  17. Darren@Custom .NET training

    I don’t know which is worse – the menus jumping about or an unnecessary scroll bar on the home page. There must be a better way…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Anti-Spam Quiz: