Member Avatar for neoseeker191

The title is kind of hard to understand. Basically my website is perfectly in line when you have a scroll bar on the side of the screen, but when you don't things come out of line and you can notice breaks in the background.

I'm not really sure whats causing this, any help would be appreciated.

Here is a link to the test site:

  • 3 Contributors
  • 2 Replies
  • 86 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

This kind of shift usually happens because the viewport width changes when a vertical scrollbar appears or disappears. is on the right track — layouts tied to a fixed resolution or to 100% of the viewport can move when the browser reserves scrollbar space. 's Firefox test shows the behaviour can be browser/OS dependent, so cross-browser testing is important.

Practical fixes to try (in order):

Force a vertical scrollbar so the layout never shifts:

html {
  overflow-y: scroll;
}

Put your site content into a fixed-width, centered wrapper so page centering does not depend on the viewport width:

.container {
  width: 980px;
  margin: 0 auto;
}

If the visible problem is a seam in a background image, use a horizontally tiling background or attach the background to the centered container instead of the body:

body {
  background-repeat: repeat-x;
  background-position: top center;
}

Notes: forcing the scrollbar works reliably on many desktop browsers but may have no effect on platforms with overlay scrollbars (modern macOS). If these fixes do not help, inspect elements with percentage widths or floats that can cause 1px rounding differences across browsers and test at multiple resolutions. For reference on the CSS property used above see MDN on overflow-y.

Recommended Answers

All 2 Replies

Member Avatar for kanaku

The display looks the same for me (with or without the scrollbar). I'm using Firefox 3.

Member Avatar for MidiMagic

This is what happens when you design for a specific screen resolution.

There is more room on the screen when the scrollbar isn't there.

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.