Member Avatar for Geekophelia

I- obviously- don't know how I got it, but apparently I changed something I shouldn't have.... for a week or so I've had a wierd issue in IE & FF, like there's a column being added to the right of my main content. Unless I use overflow:hidden, when you scroll to the right- an area where there is no content- it looks (depending on browser), like the header, the background, or both "ran out".
I'm new at this, but I'm a good researcher. Besides the books, ALA, w3, and every other website known to man, I've been trying the hit-and-miss approach, systematically recording changes. Which is how I solved the last conflict, and how I probably caused this one!

The website isn't even done, but it's driving me nuts, so I uploaded it, hoping someone can help.

All I put up was the main page, the bracelets page- which is how almost all the 2nd-level pages are set up- and the first row of bracelets (and relevant files).

I'm obsessing and would really appreciate any help you all can offer.

Thanks!

PS- stop laughing at all my  s!!!

  • 2 Contributors
  • 2 Replies
  • 96 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Geekophelia

Dani AI

Generated

Good to hear it got fixed — edited the CSS and stopped the extra right-hand column. For anyone else chasing the same symptom, a short checklist and a tiny diagnostic script make these layout bugs quick to find and fix.

Common causes: a single element wider than the viewport (images, iframes, fixed-width blocks), width:100% combined with horizontal padding/margin, absolute/floated elements that escape their container, or stray inline-block spacing. Hiding the overflow only masks the problem; the goal is to find the offending element and correct its sizing or positioning.

Quick workflow

  • Open the page in a current browser and use the inspector to toggle backgrounds/borders on suspected containers.
  • Run this in the console to list elements wider than the viewport:
[].forEach.call(document.querySelectorAll('body *'), function(el) {
  if (el.offsetWidth > document.documentElement.clientWidth) {
    console.log('Wide element:', el, el.offsetWidth);
  }
});
  • Once identified, fix by: constraining images (img { max-width: 100%; height: auto; }), switching to box-sizing: border-box to avoid width+padding surprises, removing unintended margins, or adjusting absolute positioning.

For authoritative details on how overflow and box-sizing behave, see MDN's pages on overflow and box-sizing:

Thanks to for nudging for an answer — the above steps will help locate the culprit quickly on any similar site.

Member Avatar for syahrizal

Anybody want to answer...

Member Avatar for Geekophelia

Never mind!!! I opened the css file, closed my eyes, punched a bunch of keys, and fixed it. (Okay, it wasn't that ugly, but it wasn't pretty, either!) Going to upload the fix (or take down the site) now. Thanks for looking at the post, anyway., it's a great forum!

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.