Member Avatar for allifields

Hi there.

So I have 2 pages with 3 divs. A content div containing a fixed sidebar div and a main div. The problem is when you're on the Index page and you click to go to the Contact page, the sidebar moves, or rather divs move, and I don't get what the problem is. Can anybody help me out? Thank you in advance!

I have the source code on dropbox because I thought it would be easier that way. Also, sorry in advance for my messy CSS. I'm kinda new to this!

https://www.dropbox.com/s/kd7ukjk1j15ptkn/Test3.zip

  • 3 Contributors
  • 3 Replies
  • 242 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by allifields

Dani AI

Generated

Short explanation: the layout is shifting because one page shows a vertical scrollbar and the other does not. When the scrollbar appears it reduces the viewport width and any elements positioned relative to that width (including fixed-position sidebars built with percentages or 100% widths) will jump. This is normal browser behavior, not a mysterious bug in the DOM.

A quick, robust strategy is to reserve the scrollbar space so the viewport width never changes. pointed this out and suggested forcing the scrollbar on every page. A slightly more modern alternative (which keeps the visual behavior but reserves space) is to use the CSS gutter property on the root element:

/* reserve vertical scrollbar space in supporting browsers */
html {
  scrollbar-gutter: stable;
}

If you need a completely cross-browser fallback, forcing the vertical scrollbar remains the simplest option.

Another reliable approach is to structure the layout so the sidebar width is explicit and the main column is offset by that fixed width. That keeps the main layout from depending on viewport width changes:

/* fixed sidebar pattern */
body { margin: 0; }
.sidebar { position: fixed; left: 0; top: 0; width: 240px; height: 100vh; overflow: auto; }
.main   { margin-left: 240px; box-sizing: border-box; }

Troubleshooting checklist: test at smaller window sizes and higher zoom (that reproduces the issue); check computed widths in devtools to see which element contracts when the scrollbar appears; avoid using 100% widths for elements that should remain fixed; and use box-sizing: border-box to reduce surprises. Thanks to for reminding to host the files when asking for help, and to for the straightforward scrollbar fix — it is the fastest remedy for most cases.

Recommended Answers

All 3 Replies

Member Avatar for pixelsoul

Do us all a favor, put the site up online somewhere and post a link so we can see. Most of us are not going to download the files and look through a bunch of code. If we can see it online that makes it easier for us to just see the problem and tell you what you should do.

Member Avatar for JorgeM

Yes, please... having the relevant code easily availble makes it easier to help you.

In any event, I had an idea about the issue based on your description. I took a look at your files and I didnt see the problem right away because the content of both of your pages fits nicely on my monitor. However, when I reduce the size of the window or increase the zoom level the problem appears as expected.

If you notice that when your content doesnt fit in the display, the page with this content will also have the scroll bar on the right side. The page that doesnt have much content and displays in the window nicely doesnt have the scroll bar.

One way to fix this is to show the scroll bar on the right side on all of your pages regardless. Here's how...

html {
    overflow-y: scroll;
}
Member Avatar for allifields

Thank you JorgeM for the solution. You really helped me out a lot as I was stressing over this problem! And sorry Ill post the code here or online next time!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.