Grow your CSS skills. Land your dream job.

Eliminate “Jumps” in Horizontal Centering By Forcing a Scroll Bar

Published by Chris Coyier

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; 
}

Comments

  1. Permalink to comment#

    What about:
    html { overflow: -moz-scrollbars-vertical !important; }
    for firefox?

  2. Permalink to comment#

    This works in Firefox just fine:
    html { min-height: 100%; margin-bottom: 1px; }

  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.

  4. I always favored just using a bunch of line breaks to create the scroll bar :)

    I kid of course, nice solution.

  5. Permalink to comment#

    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 :)

  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 =)

  7. jv
    Permalink to comment#

    An easier way, and it works in all browers:

    html {
    min-height:100%;
    margin-bottom:1px
    }

  8. jv
    Permalink to comment#

    By gum…I plumb forgot about the IE/min-height thing. *slaps forehead*

  9. Permalink to comment#

    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.

  10. Tim
    Permalink to comment#

    here’s another good one on this topic http://www.csskarma.com/articles/dummy_scrollbar/

  11. steve
    Permalink to comment#

    Hey, this site looks amazing. Is it a wordpress template or was this pre-made for the site?

    Steve

  12. Permalink to comment#

    or just do

    html {
    height:100.1%;
    }

    Simple lol

  13. Daniel Holbert
    Permalink to comment#

    > 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.

  14. Permalink to comment#

    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.

    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?

  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.

  16. Permalink to comment#

    What about Opera? overflow-y:scroll doesn`t work in it.

  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.

  18. Chris
    Permalink to comment#

    Overflow-y: scroll works on all the browsers I’ve tested… Good trick!

  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??

  20. AaronMann.com
    Permalink to comment#

    This is great Chris, thank you! =)

  21. reader
    Permalink to comment#

    Thanks heaps!

  22. Lucy
    Permalink to comment#

    The html {overflow-y: scroll;} doesnt do the trick for Opera … just found out.

  23. Lucy
    Permalink to comment#

    Oh, and also JUST found out its alredy been mentioned here ..well well :-)

  24. @Lucy, I actually cover that in Screencast #4.

  25. emily
    Permalink to comment#

    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!!

  26. Permalink to comment#

    I love your solutions, and the way you try to stay away from hacks in pro of cleaner, and more standards compliant code.

    Cheers :)

  27. Nishith
    Permalink to comment#

    it doesn't work on apple safari I am facing this problem

  28. Clara
    Permalink to comment#

    It does not work on Safari… :(

  29. This is a fantastic CSS tip, I can’t tell you how many times html {
    overflow-y: scroll;
    }
    has saved the day!

  30. Sandesh
    Permalink to comment#

    Guys, add one parent wrapper DIV to your layout and add bellow CSS:

    .mainWrapper { height:100%;
    overflow-y:auto;}

  31. Sandesh
    Permalink to comment#

    .mainWrapper { height:100%;
    overflow-y:scroll;}

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".