Grow your CSS skills. Land your dream job.

Problem with container on scrollbar

  • waq
    # April 7, 2012 at 3:10 pm

    Hey everyone,

    I am working on a website, developed by someone. I am stuck on a problem.

    Its just a 10/12 pages website with different container heights (auto) on different pages (container is fixed width with auto margin). Problem is that when there is a page with height lesser than browser view port there is no problem but when the page loads with bigger height than the view port, the main container with auto margin move slightly (8px on FireFox – Windows XP) to the left. I have figured out that it is because of vertical scrollbar (which comes when bigger page loads). The problem looks very logical, I have some options on my own, like using min-height or adding bottom margin on main container but this unnecessarily will add scrollbar to other pages.

    Does any one encounter this problem before? I will appreciate any help. Looking forward for any CSS fix. Thanks in advance.

    Kind regards,
    Waqas.

    # April 10, 2012 at 2:43 pm

    just add the following lines to your css

    html {
    overflow-y: scroll;
    }

    this will add a vertical scrollbar to every page (even when none is needed), but will eliminate the inconsistency between your pages.

    you can read more about it here: http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

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