Member Avatar for Maidomax

I am working with some other guys on a web page

The guy we are buildin the page for demands that we center the page differently. Right now if you shrink the width of the browser, the page will align it self to the left corner of the browser starting with the image of stars on the side. He wants it to be aligned starting with the main content part, leaving the stars out of the browser window to the far left. Is this possible at all?

  • 2 Contributors
  • 2 Replies
  • 130 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Maidomax

Dani AI

Generated

A concise note for anyone who hits the same centering problem: when decorative artwork (the “stars” in this thread) is part of the page flow it will expand the document width and force the browser to align to that artwork instead of the content column. That extra width is what produces the horizontal scrollbar described. Since reports the issue is resolved, below are the common, robust ways to keep the main column centered while letting the decoration sit off-screen or visually outside the layout.

Make the decoration visual-only with a background on the page or wrapper (backgrounds do not affect layout):

body {
  background-image: url('/images/stars.png');
  background-repeat: no-repeat;
  background-position: left center;
}
.page {
  max-width: 960px;
  margin: 0 auto; /* centers the main column */
}

Or place the decoration in a layer that does not participate in layout (fixed positioning keeps it out of the document flow and won’t change page width):

.decor-stars {
  position: fixed;
  left: -120px; /* push partly off-screen for small viewports */
  top: 0;
  width: 240px;
  height: 100vh;
  background: url('/images/stars.png') no-repeat left center;
  pointer-events: none;
  z-index: 0;
}
.wrapper {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 960px;
}

Quick troubleshooting tips: use the inspector to outline elements (or run a small script) to find which element’s bounding box extends past the viewport — that’s the overflow culprit. Avoid using overflow-x: hidden on the body as a first fix; it hides the symptom and can break accessibility on small screens. For reference on the properties used above, see the MDN docs for background-image and position.

Recommended Answers

All 2 Replies

Member Avatar for MidiMagic

It seems to be doing that on Firefox.

The main part does not shrink. Instead, it makes a horizontal scollbar

Member Avatar for Maidomax

We fixed the problem a few days ago. Thanx!

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.