2

I have centered the contents of my page by wrapping the page contents in a wrapper div and then putting this in the stylesheet:

#wrapper {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}

The issue is: Whenever the content increases and the vertical scrollbar appears, it displaces the content because the size of the viewport has changed. How can we make sure that the position of the centered content doesn't change regardless of the scrollbar visibility?

MaVRoSCy
  • 17,747
  • 15
  • 82
  • 125
Zuhaib Ali
  • 3,344
  • 3
  • 20
  • 32
  • Can you post URL or create a fiddle here - http://jsfiddle.net/ – Dipak Oct 19 '12 at 05:49
  • You may be able to use absolute positioning for your content, but it depends on the type of content you have. – Martijn Oct 19 '12 at 05:52
  • @dipaks Bartell's answer solved it. – Zuhaib Ali Oct 19 '12 at 05:56
  • @Martijn The site has a liquid layout. – Zuhaib Ali Oct 19 '12 at 05:57
  • 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:17

1 Answers1

4

Because your content is positioned relative to the size of the window (margin-left: auto; margin-right: auto) when the width of the page changes (when the scroll bar appears) the position of your content changes as well.

In order to fix this you could specify an absolute position for your content on the page using this: postion:absolute

Another option is to use the overflow-y property in order to specify whether or not to clip the content that overflows onto the elements content.

html {overflow-y:scroll;}
Scott Bartell
  • 2,801
  • 3
  • 24
  • 36