9

I have: I have several web pages both with this outline:

<body>
<div id="container">
CONTENT
</div>
</body>

with the CSS:

body{
color:#000000;
background-color:#FFFFFF;
background-image: url(background.jpg);
background-repeat: repeat-x;
font-family: verdana;
letter-spacing: 1px;
}
#container{
margin-left:auto;
margin-right:auto;
margin-top:5px;
width: 700px;
}

Problem: All pages are short so that no scroll bar shows up, but one page is longer so a vertical scroll bar on the right shows up. This second page causes the container to be shifted (to the left) just a bit.

From what I understand a common solution is to make the scrollbar show up on all pages, but I really want to avoid that since it is just one page out of many.

Question: Is there a way to avoid shifting the container while still having it centered without making the scrollbar show up on all pages?

Thomas
  • 1,085
  • 5
  • 19
  • 33
  • Possible duplicate of [How Do I Stop My Web Content From Shifting Left When The Vertical Scrollbar Appears? Roll-Up of Advice 2017](https://stackoverflow.com/questions/45524214/how-do-i-stop-my-web-content-from-shifting-left-when-the-vertical-scrollbar-appe) – JBH Aug 05 '17 at 17:18

4 Answers4

11

People with large monitors will never see a scrollbar on any page.

People with small monitors will always see scrollbars on all pages.

Despite monitor size, people are free to make any browser window any size and cause scrollbars.

Oh and let's not forget about people that like to add a dozen browser toolbar addons making the browser window's content area half as high as it could be.

That's just how it is and no static solution is going to get around that. Changing the margin on one page is not a solution for reasons listed above.

If you insist on fixing something people have learned to live with, it's going to have to be a "dynamic" JavaScript solution where you calculate your left margin and add the width of the scrollbar. For different browsers, bars are different widths so you will have to calculate this too.

Edit: Like someone said in another answer, this is default browser behavior and should be left alone.

Edit2: As user dampe said in comments, you'll also have to trigger the JavaScript after each time the window is resized by the user.

This is going to be an epic waste of your time. Typically, default behavior of the browser is left to the browser. Way too many variables to account for and you're bound to miss something if you don't have every scenario, skin, OS, browser version, browser brand, toolbar add-on, monitor type, size, etc. to be testing with. Once you start getting this working, you'll find you need to make exceptions and corrections for Explorer. Before you know it, you end up with a massive piece of bloat... and for what? What's the value of this?

Starting point: 100% guaranteed expected behavior in all browsers & situations.

Ending point: guaranteed looking great in your monitor/system only... you take a risk that it will look like junk on a system/scenario you haven't even thought about.

Search for a pre-made JavaScript solution or a jQuery plugin first... if you can't find one, ask yourself why?

  • not practical
  • not possible
  • not worth the trouble (low demand)

Edit3: I did some searching to satisfy my curiosity. I found a thread with a jQuery solution as well as links to methods for calculating the scrollbar width.

IMHO, this is a waste of time and resources but here's the link for anyone interested...

http://expressionengine.com/archived_forums/viewthread/158703/

Edit4: Here's a CSS solution that I found. I have not tested this but if it works it would be sweet.

html {
    overflow-y: scroll;
}

http://haslayout.net/css-tuts/Fixing-Page-Shift-Problem

Edit5: CSS solution works but not to my liking. It creates scrollbars for every page yet when not needed they are grayed out or empty... not elegant.

Sparky
  • 98,165
  • 25
  • 199
  • 285
  • @Sparky672: Thanks for the input. I will try to play around with it. – Thomas Apr 09 '11 at 15:18
  • @Sparky672: Thanks for looking into this. I did try the overflow-y: scroll part, but as you write I then get a scrollbar on each page. I have found a solution that works for me for now. I set html{overflow-y: hidden} but then put the content that is too long in another
    Long content
    . That way the scroolbar doesn't shift the whole page. The only thing about this is that the scrollbar is "in the middle of everything". I will keep trying to work on it.     – Thomas Apr 09 '11 at 19:13
  • one more thing: I guess I might be able to just "redesign" the scrollbar so that it falls in with the rest of the design for the web site... – Thomas Apr 09 '11 at 19:14
  • 1
    @Thomas: I've spent hours on this problem in the past, and I've still never seen a solution that works consistently across platforms and browser sizes to achieve exactly what you want. I've come to believe that the best solution is to set overflow-y to scroll. If the content-shifting really is enough of a problem that you need to fix it, I think you'll find that the benefits of rendering the scrollbar far outweigh the minor aesthetic downside. It's such an easy fix, you can set it and be done with it in 10 seconds, and move on to more important things in your project. – Matt Howell Apr 09 '11 at 19:25
  • @Thomas: After much Googling and some CSS experimenting, I have to agree with bigmattyh... if you want to avoid the shift, add that one line of CSS and live with a ghost scrollbar on all short pages (I've read this is how IE 6 & 7 (not IE 8) seem to do it by default)... otherwise live with the shifting. There is no jQuery or other type of JavaScript solution that I could find. – Sparky Apr 09 '11 at 19:39
  • I also thought perhaps there was a way to create a dead zone (negative padding and/or margins as well as other CSS tricks) on the right edge with a wrapper DIV so a 50 pixel change in width would have no effect on inner content... fail. No matter what, the scrollbar effectively changes the page width and content behaves accordingly... like it was said in the beginning... default behavior. – Sparky Apr 09 '11 at 19:46
  • 1
    @Thomas: I was secretly hoping there was an easy CSS solution out there because my problem is a bit more of a problem than yours. I have a very short page where content slides open and scrollbars suddenly appear. My sudden shifting is not page by page but occurs right before your eyes as the animated content causes a scrollbar. Personally, I hate the persistent ghost scrollbars so I'm just accepting the default behavior as-is. – Sparky Apr 09 '11 at 19:50
10

I don't know about pure CSS solution, but you can use javascript to dynamically count and adjust correct width of left margin (while making the right margin a bit thinner - by size of scrollbar).

BTW: IMO: The correct way of dealing with this is: Leave it as it is. Because it is a default behavior and I don't think that users are worried about this as much as you are. This is my opinion and someone might have different one, but adding scrollbar to every page (to solve this) is epic fail. :)

Nemoy
  • 3,347
  • 1
  • 15
  • 14
Damb
  • 14,410
  • 6
  • 47
  • 49
  • 1
    @dampe: Thank for the answer. I also don't like the idea of adding the scrollbar to all pages. And you are probably right that no one will notice except me. I have trying to have my site be very simple and elegant. Do you have an example of how to use javascript to "dynamically count"? – Thomas Apr 09 '11 at 15:01
  • I agree. Users are not doing page to page comparisons of your site. Certainly not browser to browser comparisons. – Sam Apr 09 '11 at 15:02
  • @Thomas M: I don't have code example.. but you can search here or google. It's basically about getting dimensions of browser window. Then doing some math (margins = browserWindowWidth - content size), some more math (leftMargin = margins/2) and (rightMargin = margins/2 - widthOfScrollbar). Etc... it needs testing and tweaking and IE will probably make you want to tear your head off :d – Damb Apr 09 '11 at 15:07
  • Also as Sparky672 mentioned: every scrollbar will have a bit different size. Also the different skins and toolbars... this all makes the dynamic solution waste of time for this :) – Damb Apr 09 '11 at 15:09
  • Uh and I forgot.. you don't have to care about right margin. You basically need different solution. You have to count the width of left margin (what it should be without scrollbar). And then make some check to know if scrollbar appeared (=your content is long) - you can avoid this when you know exactly at which page this happens. Then you just need to set the margin to that "shouldBe" value. But this works only in specific scenario, when window is static. You will also have to deal with window resizing.. when I scale my window.. margins do change (the margin:auto ones). Happy wasting.. :p – Damb Apr 09 '11 at 15:27
  • @Thomas, Like dampe said, you'll have to fire the JavaScript after a window is resized. Taking into account the near infinite scenarios this is going to be an epic waste of time or an epic failure. Whenever I start fussing with something like this I search for others before reinventing the wheel. If you can't find a jQuery plugin that takes care of this, then it probably cannot be done effectively. Good Luck. ;) – Sparky Apr 09 '11 at 15:47
  • @Thomas M, see EDIT #4 in my original answer above. It's a simple, one-line, pure CSS solution but I have not tested it in all browsers. Perhaps you can try it and get back to us. :) – Sparky Apr 09 '11 at 16:31
  • Epic fail? No. Setting overflow-y to scroll is a common, simple solution to this problem, that doesn't require any inelegant javascript hackery to achieve what is basically an attempt to get around the normal, default, expected browser behavior. – Matt Howell Apr 09 '11 at 16:35
  • @bigmattyh: As I said: It's epic fail *in my oppinion*. The scrollbar isn't a decoration and I don't want to see it when I don't have to. – Damb Apr 09 '11 at 16:53
  • @bigmattyh, perhaps you misunderstood what was written. Nobody said it's an epic failure to actually solve the problem quickly & easily. I said it would end up being an epic failure to try to solve this with JavaScript and dampe said it would be an epic failure to force a scrollbar on every single page needing it or not. – Sparky Apr 09 '11 at 16:58
  • Looking at the CSS solution closer... it creates empty or grayed out scrollbars for pages that do not need to scroll. I'd stick with the default browser behavior. – Sparky Apr 09 '11 at 17:04
  • @dampe, Normally, it's good design sense to respect default browser behavior, but content-shifting is a case where the default behavior can actually detract from the user experience. Rather than leave the default behavior as-is or hacking together a JS-based approach, it's perfectly acceptable to render an inactive scrollbar by default. It works consistently across all platforms and screen sizes and is trivial to implement. Obviously, there are trade-offs to every design decision, but this isn't 1999, and you won't find many people arguing that users don't understand how scrollbars work. – Matt Howell Apr 09 '11 at 17:37
0

You could also, with php, add a left-padding value when you're on the long page, but the scrollbar will be different widths in different browsers/platforms, so javascript would be the only pixel-perfect solution.

Sam
  • 1,233
  • 1
  • 9
  • 16
  • thanks for the replies. I would like to try and see if I could do this "pixel-perfect" solution. So how do I start? Do you have any examples that I could start with? – Thomas Apr 09 '11 at 15:09
  • @Thomas, for pixel-perfect solutions you'd need to be prepared to consider JavaScript (or any of its derived libraries') solutions. If you're *willing* to consider JavaScript, please consider adding the 'javascript' tag, and, if possible, the name of a library you'd be happy to work with (if any). – David Thomas Apr 09 '11 at 15:20
  • Server-based solutions (like using PHP) won't fix this problem, since it's all about what happens on rendering in the browser. – Matt Howell Apr 09 '11 at 17:49
  • @bigmattyh. I agree, except if I only care about FF, I know that FF scrollbar is 16px wide, then I use php to generate my css, check if I'm on the offending page, and add 16px of padding. (Just to be clear, I would never, ever do this, just saying it could be done. I agree with others who have said don't mess with the default behavior.) – Sam Apr 09 '11 at 18:32
0

If you want a pure css option, i believe an absolute positioned div inside the body with width and height of 100%, overflow auto and right padding larger than the width of a scroll bar, will replace the normal scrollbar without shifting the content to the left on long pages.

I know i used this technique a long time ago, but i cant remember the exact css quirks i had to use.

herostwist
  • 3,778
  • 1
  • 26
  • 34