Eliminate “Jumps” in Horizontal Centering By Forcing a Scroll Bar
You are likely aware of the page-centering technique of adding auto left and right margins to an outer div:
#page-wrap {
margin: 0 auto;
}One of the shortcomings of this technique is that when used on websites with multiple pages, the layout can appear to “jump” a little bit when going back and forth between pages that require scroll bars and pages that do not. This is because the ~16px width of the scroll bar in the browser window causes the content area to become that much narrower and the wrap div re-centers itself in the narrower content area causing the jump.
One way to eliminate this jump is to force scroll bars onto every page regardless if they need them or not. This may annoy some purists out there, but I think it’s a decent solution.
This is one way to do it, which forces the page to always be just a little bit taller than the browser window forcing a right scroll bar:
html {
height: 100%;
margin-bottom: 0.01em;
}It’s a good idea, but it doesn’t seem to get the job done in Firefox.
Here is a way you can force only the right sidebar with a nasty and unsemantic hack:
#scroll {
position: absolute;
top: 0;
bottom: -0.1px;
width: 1em;
z-index: -1;
}Then just include an empty div in your HTML with an id of “scroll”. Like I said, this is kind of a nasty way to do it, here is a much cleaner way:
html {
height: 102%;
}Here is another solution, which effectively forces both horizontal and vertical scrollbars:
html {
overflow: scroll;
} You can see an example of this working in this example. It would be nice if we could get just the vertical scroll bar by assigning overflow-y to scroll, but again it doesn’t work in Firefox. UPDATE: Actually, I’ve been shown the light. Assigning overflow-y to scroll does work, and it works in Firefox, Safari, and IE 6, and that makes it the best solution:
html {
overflow-y: scroll;
}
Loading ...
1
What about:
html { overflow: -moz-scrollbars-vertical !important; }
for firefox?
Comment by Regis — November 27, 2007 @ 5:48 pm
2
This works in Firefox just fine:
html { min-height: 100%; margin-bottom: 1px; }Comment by chipgrafx — November 28, 2007 @ 10:39 am
3
@Regis: That solution works great in Firefox, thanks! It actually ONLY works in Firefox though, so we’d have to use it in conjunction with another technique anyway.
@chipgrafx: Yep, that works in Firefox too! But IE won’t honor the min-height thing, so I’m thinking the best solution is setting the height of html to over 100% is the most solid way.
Comment by Chris Coyier — November 28, 2007 @ 11:07 am
4
I always favored just using a bunch of line breaks to create the scroll bar
I kid of course, nice solution.
Comment by Benjamin Sterling — November 28, 2007 @ 12:15 pm
5
Good tip, but why would you use that technique for centering your site? I can’t think of a whole lotta situations when you would need to use that technique. Typically using either absolute or relative positioning with some negative margin will do the trick. Can anyone give me a situation where you would actually have to use this?
Not trolling, just curious
Comment by Andrew — November 28, 2007 @ 12:54 pm
6
@Andrew: Actually, TONS of sites use this exact technique for centering their content. Digg.com, Apple.com, Newsvine.com… I’d say it’s by far the most common content centering technique out there. Not to mention CSS-Tricks.com uses it, which is proof enough =)
Comment by Chris Coyier — November 28, 2007 @ 1:22 pm
7
An easier way, and it works in all browers:
html {
min-height:100%;
margin-bottom:1px
}
Comment by jv — November 28, 2007 @ 2:52 pm
8
By gum…I plumb forgot about the IE/min-height thing. *slaps forehead*
Comment by jv — November 28, 2007 @ 2:55 pm
9
Also, remember that older browsers don’t support the centering with auto-margins on left/right. You need to enforce a text-align: center; on a container around the element being centered.
Remember to reset to “text-align: left;” on the centered elements (inside container), as text-aligns is inherited.
Comment by koew — November 28, 2007 @ 3:11 pm
10
here’s another good one on this topic http://www.csskarma.com/articles/dummy_scrollbar/
Comment by Tim — November 28, 2007 @ 3:19 pm
11
Hey, this site looks amazing. Is it a wordpress template or was this pre-made for the site?
Steve
Comment by steve — November 28, 2007 @ 3:51 pm
12
or just do
html {
height:100.1%;
}
Simple lol
Comment by Rich — November 28, 2007 @ 4:12 pm
13
> It would be nice if we could get just the vertical scroll
> bar by assigning overflow-y to scroll, but again it
> doesn’t work in Firefox.
Actually, that solution *does* work in firefox, and it seems like the cleanest to me.
Code:
html { overflow-y: scroll; }
I tried this in a simple testcase in Firefox 2 and 3.0b1, and I get a vertical scrollbar for both versions.
Comment by Daniel Holbert — November 28, 2007 @ 5:09 pm
14
It actually doesn’t matter if IE honors min-height in this usage. All you are doing is forcing a scrollbar on the right side for non-IE browsers. IE already incorporates the spacing for the sidebar by default so you get no horizontal jumping.
And I’m a little confused why people think this has anything to do with actually centering you content. What Chris (and others are debating) is how to eliminate the slight horizontal jump you can get in Firefox when you navigate from page to page and the content stays above the fold on some pages and goes below the fold on others. Make sense?
Comment by chipgrafx — November 28, 2007 @ 6:20 pm
15
@Daniel Holbert: You are very right, I have updated the article because I now think this the best way to go about it.
@chipgrafx: You are also very right, I wasn’t considering the fact you never get the jumping in IE so it really doesn’t need to be singled out like it normally does.
Comment by Chris Coyier — November 28, 2007 @ 7:25 pm
16
What about Opera? overflow-y:scroll doesn`t work in it.
Comment by Alex — November 29, 2007 @ 11:56 pm
17
@Alex: grrroan… You are right, it doesn’t work in Opera, I just tested it =P.
I think we might be back to setting the height to >100% as the best cross-browser solution.
Comment by Chris Coyier — November 30, 2007 @ 3:26 pm
18
Overflow-y: scroll works on all the browsers I’ve tested… Good trick!
Comment by Chris — December 2, 2007 @ 1:50 pm
19
Indeed a good tip..
I have not used this before but it could be very effective, the problem has not worried me before, has any clients winged to them??
Comment by Jermayn Parker — December 9, 2007 @ 9:36 pm
20
This is great Chris, thank you! =)
Comment by AaronMann.com — January 6, 2008 @ 2:57 pm
21
Thanks heaps!
Comment by reader — January 28, 2008 @ 5:04 am
22
The html {overflow-y: scroll;} doesnt do the trick for Opera … just found out.
Comment by Lucy — February 18, 2008 @ 7:58 am
23
Oh, and also JUST found out its alredy been mentioned here ..well well
Comment by Lucy — February 18, 2008 @ 7:59 am
24
@Lucy, I actually cover that in Screencast #4.
Comment by Chris Coyier — February 18, 2008 @ 8:00 am
25
THANK YOU SO MUCH FOR THIS POST! i thought i was going crazy, and i spent literally hours, days, weeks, trying to go through every line of css code to figure out what i was going wrong. THANK YOU!!
Comment by emily — April 17, 2008 @ 4:00 pm