CODEWITHSUNDEEP
htmlcss
Zuhaib Ali
Zuhaib Ali

Reputation: 3384

How can I stop the scrollbar from displacing my page?

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?

Upvotes: 2

Views: 1040

Answers (1)

Scott Bartell
Scott Bartell

Reputation: 2840

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;}

Upvotes: 4

Related Questions