Well this week has been an annoying one to say the least. I’ve been spending time doing a new website for a client and everything was going smoothly until I suddenly noticed that one page would move to the left about 10px for some unknown reason.
I spent many a hours every night going through all the CSS and HTML to see where I had made this peculiar error. To my horror I’d sent myself into a wild goose chase. I first realised that the said page this would happen on is the only page where the content was greater than height of the window itself. Secondly I then realised that the scroll bar would appear on the browser window when only that page was loaded, because naturally the content was able to scroll past the height of the window.
Then….. Boosh! …..that little cartoon light-bulb appeared above my head. That 10px it moved to the left was about the same width as the scrollbar that would appear, could these 2 things be connected?
Hmmmmmm!
After much confusion and self doubt to whether or not I was on to something or not I then realised in order to stop this little issue I could do one of two things:
1. Ignore it and let it be or 2. Make every other page think the window was full of scrollable content without their actually being any.
I decided for the love of design I’d go for option 2!
Now if you find yourself with this embarrassing issue and are too afraid to ask anyone, especially after realising what such a school boy error you had made then look below,and don’t tell anyone!……………shhhh!
All you need to do is add this to your body CSS:
#body {
overflow:scroll;
min-height: 101%;
}
Hey presto a magical scrollbar appears on every page thus rectifying this problem and making sure nothing moves.
This should also be compatible with every browser there is far as I’m aware, but if not let me know!!
Anyway hope this has or will help you at some point!
All the best
Matt
: )#