23 Responses to “Centered Fixed Width Layout And Scrollbar Problem”
This page contains comments from the Centered Fixed Width Layout And Scrollbar Problem article.
Click the icon
to subscribe!
Subscribe
to subscribe!
Stephen Cronin is Manager of Online Service Delivery at a Queensland Government department & has been a freelance WordPress developer/consultant since 2007
*Content on this site is my own and is not related to my employer
Hire me - I'm expensive, but I'm very good!
WordPress Plugins
- DualFeeds: Offer both full & summary feeds to your readers!
- IFrameWidgets: Stop slow javascript widgets breaking your page!
- FeedEntryHeader: Add copyright info to the TOP of your feed!
- LocalCurrency: Show values to readers in their own currency!
- KeywordLuv: Reward commentators with keyword rich links!
- Comment Warning: Detect potential spammers and warn them!
- Eclipse Crossword Integration: Publish crossword puzzles!
- Ajax_the_views: Make WP-PostViews work with caching plugins!
- Remove Widget Titles: Remove widget titles on the front end!
Want a Custom WordPress plugin? See my Services page.
Greasemonkey Scripts
- Google Numbered Search Results: Number Google SERPs
- Bing Numbered Search Results: Number Bing SERPs
- Disable Ctrl-W: Disable the CTRL-W key so you don't lose work
- markItUp! for Greasemonkey: Enable markItUp! for text areas
Visit my home page at Userscripts.org.
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…
Yep, exact same problem happened to me awhile ago. After a little bit of research, I found out what was going on and how to fix it but it was pretty annoying!