Member Avatar for decl

I am fairly new to the Web Development world. When I create a new site, most often as there will be a slight movement, right to left, or left to right of the page when switching from page to page.

I am using Dreamweaver CS4.

Any help would be appreciated

  • 3 Contributors
  • 8 Replies
  • 2K Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by teedoff

Dani AI

Generated

Nice catch by and . If you want a solution that avoids filler markup and does not accidentally force a horizontal scrollbar, reserve space only for the vertical scrollbar, and use a modern fallback for newer engines.

/* Keep the layout width stable across pages */
html {
  /* always reserve vertical scrollbar space */
  overflow-y: scroll;
}

/* Modern enhancement: reserve the gutter only when needed */
@supports (scrollbar-gutter: stable) {
  html {
    overflow-y: auto;         /* show the bar only if needed */
    scrollbar-gutter: stable; /* but keep the width reserved */
  }
}

overflow-y: scroll fixes the tiny side-to-side nudge by keeping the vertical scrollbar width consistent page to page. Where supported, scrollbar-gutter: stable achieves the same effect without always showing the bar. See MDN for details on overflow-y and scrollbar-gutter. (developer.mozilla.org)

A couple quick checks if any movement remains:

  • Look for accidental horizontal overflow: wide images, long unbroken text, or negative margins. Use img, video { max-width: 100%; height: auto; } and let text wrap.
  • Avoid masking issues with overflow-x: hidden on the root unless you have audited for real overflow; it can hide bugs that still shift other pages.
  • Note that on systems with overlay scrollbars (common on macOS), the gutter may not consume layout space; scrollbar-gutter handles that gracefully by reserving space only when classic scrollbars are used. (developer.mozilla.org)

This keeps your layout steady without extra HTML and builds on the approach suggested, while future-proofing for newer browsers.

Recommended Answers

All 8 Replies

Member Avatar for teedoff

umm can you post a link to your site? or the code?

You sure its not the fact that one page may be longer than the height of the browser, so therefore a scrollbar is added to the right thus shifting the page slightly?

Edited by teedoff because: n/a
Member Avatar for AtomicPages

Yeah, it's the scroll bar that you have on every page except links and contact.
The only way to get around this is to either add a scroll bar on these pages using the overflow property in CSS or by adding additional content to these pages so a scroll bar shows up.

Member Avatar for decl

I didn't add a scroll bar to any page, at least not intentionally. Can you point me in the right direction here, please?

Member Avatar for AtomicPages

The scroll bar is something that is automatic and happens when you overflow the container. On every page except the links and contact page, your content does not overflow the container and therefore doesn't need the scroll bar to show up.

For the time being, you can add an empty div with a defined height on both of those pages so they are consistent. e.g.

<div style="width:100%; height:250px; background-color:transparent;">&nbsp;</div>

This would probably solve your issue on those two pages.

Member Avatar for teedoff

I prefer to add a global style rule to add a scroll bar to all pages. Less headache I think.

In your stylesheet add the following line:

html {
	overflow: scroll;
}
Member Avatar for decl

It works! My eternal gratitude... It is amazing what can happen when you know what you are doing, or can tap into someone who does.

Member Avatar for teedoff

I had this exact same thing happen to me when I first started out. Thats why I suggested it might be the scrollbar without seeing your code or page. I remember thinking "whats going on?" when I saw my page shifting over like you did.

Glad to help!

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.