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!
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
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.
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.
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!
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.
It shows that whenever you have large information to show on your web page always use overflow:scroll to maintain consistency in website.
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
I have been looking for good support on WordPress. I own a wordpress blog but have difficulties modifying the templates. Hope I can find some useful stuff here.
LINK REMOVED: because of failure to use KeywordLuv syntax (name@keywords)
ive never run into this problem but its good to know experienced designers/coders still experience some problems just like me
LINK REMOVED: because of failure to use KeywordLuv syntax (name@keywords)
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
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 🙂
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.
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..
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.
Thanks for the info. Everytime I run into a wordpress issue you seem to alreay have posted about the fix. Thanks again
Norm
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.
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
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.
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!
Great! Helped solve my problem. I used
body { overflow-y: scroll }
as I didn’t need the lower scrollbar but same idea.
Nice one!
Thank a lot! The problem has been bugging me for quite a while, but this helped me solve it!
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…
I fixed this issue using custom mScrollbar…
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
$(‘#ur element’).mCustomScrollbar();
then add this to your css
#(ur element) .mCSB_container { margin-right: 26px; }
Set the margin so that it is centered.
thank you!