Goodbye Annoying Little Horizontal Jump
Isn’t it annoying when you have a horizontally centered site that jumps about 20 pixels to the left when you come to a long page that requires scroll bars, and then jumps 20 pixels back to the right when you come to a short page that doesn’t require scroll bars?
IE actually doen’t have this problem, because it has a scroll bar there at all times, whether one is required or not. The trick is to make Firefox and company behave the same – so that a centered page is centered in same spot, no matter how short or long the pages are.
The solution, happily, is quite simple! Simply put this at the top of your CSS file:
html {
min-height:100%;
margin-bottom:1px;
}
And that’s it! IE ignores min-height and Firefox and company have a browser window that is 1 pixel taller than necessary, forcing a vertical scroll bar to be present at all times.
November 11th, 2005 at 3:38 am
That’s answered a question that has been irritating me for a while. Thanks.
November 11th, 2005 at 9:44 am
I’m so glad to see that someone is reading this and getting something out of it. =)
I was pretty stoked when I first discovered this trick … it’s a little thing, but it used to drive me crazy!
November 11th, 2005 at 5:40 pm
Great! Thanks for that, it was annoying me as well, a lot!
November 14th, 2005 at 1:06 am
Yes, that’s a nice trick!
I am not using it, because I am not bothered by whether there’s a scrollbar to the right or not, but I’ve tested it and it works nice:)
November 18th, 2005 at 6:22 am
What a great tip! This used to annoy me the most when I’m demontrating some of my work to a prospective client on my laptop.
As the files are local, they load very quickly and the horizontal jump is more noticeable.
Not any more with this neat tip!
Thanks!!!!!
November 23rd, 2005 at 9:31 am
Simple and effective. Thanks.
November 28th, 2005 at 9:56 pm
I have had issues with this since I first set foot in web design. It’s always annoying to push the back button and have the entire page shift over. This is very helpful, thank you very much.
November 29th, 2005 at 1:52 am
Great idea, but it will probably break the day IE becomes complient. Another way to solve the issue is to use the following CSS snippet.
html {
overflow: -moz-scrollbars-vertical;
}
Cheers!
November 29th, 2005 at 9:53 am
Hi Johan,
I’m afraid this snippet, while it works, does not validate.
Though I am indeed quite guilty of coding things that may or may not break in IE7, I don’t think this is one of them. What’s to break? If IE7 supports min-height then it will just have a 1 pixel bottom margin just like the good browsers currently do with this code.
;o)
November 30th, 2005 at 7:16 pm
Thanks! That’s been bugging me. I can see that I’ll get a lot of mileage out of your site. I’ll be back!
: )
January 4th, 2006 at 5:52 pm
An excellent thought!!
January 23rd, 2006 at 9:29 am
Thanks, mate! That saved my day!
January 31st, 2006 at 5:16 am
Ditto on what Ksenia says there.
Jai
March 13th, 2006 at 3:23 am
Wonderful tip, thank you thousands!!!
Katja
April 7th, 2006 at 5:31 pm
Great article. I am just sad I dont know how to reply properly, though, since I want to show my appreciation like many other.
October 15th, 2007 at 5:51 pm
[...] Tłumaczenie “Goodbye Annoying Little Horizontal Jump” autorstwa Mani Sheriar – profesjonalistki w dziedzinach CSS i XHTML. Mani jest właścicielką Sheriar Designs i zgodziła się na udostępnienie swojego artykułu w języku polskim. [...]