Home/ Questions/Q 4249758
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T04:26:21+00:00

I have: I have several web pages both with this outline: <body> <div id=container>

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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. 🙂

    • 0