#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    3
    Rep Power
    0

    Browser's vertical scrollbar shifts layout


    Hi everyone!

    I have a problem with the design I'm working on.

    I used this css grid as a basis to make the design more flexible: http://cssgrid.net/.

    Most of the content of the website is not longer than a few lines but one of the pages contains a long text. The problem is that the browser automatically adds a scrollbar to the right which then moves the whole design to the left by a few mm. When you click the menu to go to another page, this shift looks quite stupid.

    So far I thought of adding
    Code:
    style="overflow: scroll; height:350px;"
    to the box that contains the layout. That of course removes the browser scrollbars but sort of defeats the point of the flexible layout as the height is now defined to fit my screen.

    Another idea was to add
    Code:
    html {height: 100.1%; }
    but that doesn't look good either.

    What else can I do to prevent the shift? Thanks!
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    I use

    Code:
    body{overflow-y:scroll;}
    This adds a permanent scrollbar. (and thus no shift)
    Any other solution that tries to compensate with margins and stuff will not work due to the differences between operating systems (all have different scrollers). Unless you make your own scroll stuff with javascript
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    3
    Rep Power
    0
    thanks a lot! works!
  6. #4
  7. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by tou1
    thanks a lot! works!
    good to hear!

IMN logo majestic logo threadwatch logo seochat tools logo