Member Avatar for collinskawere

hi! it's been long since the last time i was here! but here am back with a problem. am doin a webpage and i want it to perfectly fit on the screen.

i have used a body width of 100% but it create scroll bars.

i want a perfect one like that of facebook or daniweb. please help right away, thanks.

  • 6 Contributors
  • 7 Replies
  • 187 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by Sahil89

Dani AI

Generated

reported that width:100% produced horizontal scrollbars. Several replies rightly asked for a minimal example () and pointed at inner elements as the usual culprit (). Quick fixes were suggested (percent widths, hiding overflow), but the robust approach is to find the overflowing element and fix its sizing rather than mask the symptom.

Common causes and a short debug checklist:

  • Default body margin/padding or added left/right padding combined with width:100% (reset to zero first).
  • Fixed-width children (images, tables, iframes, widgets) or long unbroken text.
  • Negative margins, absolutely positioned elements, or floats extending past their container.
  • Subpixel rounding or CSS transforms that produce 1px overflows.
  • Use the browser inspector and this console test to list offenders:
[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .forEach(el => console.log(el, el.scrollWidth));

A practical CSS pattern that prevents most horizontal overflow while remaining responsive:

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

html, body { margin: 0; padding: 0; height: 100%; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
img, iframe, video { max-width: 100%; height: auto; display: block; }

Notes tied to thread suggestions: percent-based layouts (as noted) are fine when paired with max-width and inner padding. The historical 800x600 baseline mentioned by is acceptable as a minimum, but modern responsive breakpoints are a better fit. Hiding overflow (the quick fix mentioned by ) can hide the real problem and should be used only temporarily for debugging. A minimal reproducible example (outer HTML + the CSS that affects widths) is what responders like need to diagnose remaining issues.

Recommended Answers

All 7 Replies

Member Avatar for simplypixie

Please post the relevant sections of your stylesheet and html so we can help.

Member Avatar for Sahil89

Please post the relevant sections of your stylesheet and html so we can help.

why its not relevant???

i have used a body width of 100% but it create scroll bars.

Check for your body content if thats width is greater than screen resolution then it will create scroll bars.

Member Avatar for arijith04

I would like to advise that you design for a minimum resolution of 800x600.

Assuming that people using that resolution will be maximizing their browser windows, so a minimum width of 760 is acceptable. Then, I would use flexible widths, centering your main content in the middle of the browser window and making the text content a fixed width of no less than 400 pixels.

Member Avatar for simplypixie

Sahil89 - I want to see the 'relevant' code as the poster is saying a width of 100% is creating scrollbars, which it shouldn't, and therefore I want to see the rest of the 'relevant' CSS and HTML (relevant means relevant to the question, i.e. not all of their code) so that I can see what might be causing the scrollbars.

The poster hasn't asked what width to set their page at but has an actual problem with their current code that they need help with which I could possibly help solve if I could see thier code (the same as answering any coding question)!

Member Avatar for James_Smith

You said that - "i have used a body width of 100% but it creates scroll bars". For getting rid of from scroll bars you have to use "overflow: hidden" for the body, it will help you to perfectly fit on the screen.

Member Avatar for Sahil89

Sahil89 - I want to see the 'relevant' code as the poster is saying a width of 100% is creating scrollbars

My bad really sorry for down vote and comment

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.