4

I have a div container which is centered (by margin-left:auto and margin-right:auto) and page design looks fine when loaded... Below this div there is another hidden one, which shows up on user request. But when this happens browser scroll shows up and mess up my design because centered div also moves few pixels to the left (so it can again be in the center).

Can this behavior be stopped?

Alternative solution is adding overflow-y:scroll but I found that overflow-y is not supported by all browsers and I can't find by which browsers... Can somebody post a link where I can see browser support list for css3 functions?

domagojk
  • 1,020
  • 2
  • 11
  • 25
  • Why is it a problem? because the container below is not centered the same way? – Brandon Frohbieter Feb 26 '11 at 15:16
  • If I understand this right, in your default state you have no window scrollbar, but when a hidden div is made visible it increases the page length and introduces a scrollbar. And you seriously consider this "messes up your design"? `overflow-y` is your best and probably only option, but to be honest dude, this is how the web is supposed to work: people expect things to change when they interact with them, and a scrollbar appearing is a strong visual cue that something *has* changed. – Will Prescott Feb 26 '11 at 16:22
  • @will You understood it corretly, but when I asked "how to stop this behaviour" I didn't meant to stop scroller from showing up (what you probably think I mean, since you genrously explained it to how the web works), but I was wondering can this reareging of div containers be stopped. – domagojk Feb 26 '11 at 16:54
  • @Orbit this is a problem because I have some javascript which positions divs based on user interaction... It's a long story, but the point is that this few pixels becomes a problem... – domagojk Feb 26 '11 at 16:56
  • easiest would be if you could link, I think I understand but I'm not sure. You may be able to use jQuery to position the div with the same left/right as the hidden component in the event listener. – Brandon Frohbieter Feb 26 '11 at 17:06
  • This question's got a bit more discussion here: http://stackoverflow.com/questions/5605667/scrollbar-shifts-content – Doug Kavendek Jun 08 '12 at 14:59

2 Answers2

1

With scroll always being shown, maybe be not good for layout.

Try to limit body width with css3

body {
    width: calc(100vw - 34px);
}

vw is width of viewport (see this link for some explanation)
calc calculate in css3
34px stands for double scrollbar width (see this for fixed or this to calculate if you don't trust fixed sizes)

Moesio
  • 3,100
  • 1
  • 27
  • 36
1

This css will always show vertical scroll on your page.

body {
    overflow-y: scroll;
}

By default it's overflow: auto;

Teneff
  • 30,564
  • 13
  • 72
  • 103