Member Avatar for bo0ga

Hello, I'm making my first website so I'm new to everything. I have some JQuery and HTML on one page and some external CSS on another. The website looks fine on my computer. I uploaded it to the hosting site and it works fine. Then I went on another laptop and the website is totally off center. It's pushed to the left and there's a large blank space to the right of it. Any ideas on how to fix this?

  • 4 Contributors
  • 3 Replies
  • 268 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by PhilEaton

Dani AI

Generated

Brief diagnosis and practical fixes for 's off‑center layout — building on points from and while adding modern, testable steps.

Start by looking for horizontal overflow and layout-breaking elements in the problem browser. A quick, temporary visual aid can reveal which element is wider than the viewport:

/* temporary diagnostic — add then remove */
* { outline: 1px dashed rgba(255,0,0,0.12); }

Also add a sensible box model baseline so padding/borders don’t inflate widths unexpectedly:

/* put in base CSS */
*, *::before, *::after { box-sizing: border-box; }

Common causes: an element with a fixed or min-width larger than the wrapper, an unclosed tag, different browser zoom/DPI settings, or a vertical scrollbar changing available width. Use the browser devtools “Computed” panel to compare the wrapper’s computed width to window.innerWidth and to spot unexpected margins, transforms, absolute positioning, or min-width values.

For a robust centering approach that avoids absolute offsets, switch the page shell to a responsive container with a cap on maximum width and keep it fluid inside that cap. Example:

html, body { height:100%; margin:0; }
body { display:flex; justify-content:center; }
.site-wrapper {
  width:100%;
  max-width:1100px;
  padding:0 18px;
}

Quick checklist: verify a standards DOCTYPE is present, test at 100% browser zoom and default DPI, look for overflow-causing children (images/videos with fixed width), check for floats that need clearing, and compare the same browser/version on both machines. As requested, the most useful pieces to post for further diagnosis are the wrapper HTML, the CSS that applies to html/body and the main container, and a screenshot with the browser’s viewport width shown.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

If you provide the HTML and CSS we can take a look.

Member Avatar for almostbob

happens often when a laid out on screen in pixels
you will get the same effect on your pc, if you open the site in a partscreen window content will push offscreen right
the solution is a different dimension em or % are scalars that adjust to window size device resolution user preference
in px
ann old crt 15inch had 800px (53px/inch)
a newer 17inch lcd has 2400 px (141px/inch)
an ipad 7inch screen has 2760px (394px/inch)

12px text is different appearance in each from 1/4inch on an old crt, to 3/100inch on an ipad
1em texxt looks the same on all of them
laid out in % the site autoadjusts to window size device ability and user font preferences (makes the page disability friendly instantly) text will reflow around non-text items flash pics vid and the site will appear very similar on all devices from phones to widescreen monitors, eactly the same, isnt possible

these standard test beds may assist you
replace yoursite.com with your uri in the links below and paste to your browser bar

speed

examine sprites for small images icons logos speed,

html http://validator.w3.org/check?charset=%28detect+automatically%29&doctype=Inline&group=0&uri=http%3A%2F%2Fwww.yoursite.com

css2
http://jigsaw.w3.org/css-validator/validator?profile=css21&usermedium=all&warning=1&lang=en&uri=http%3A%2F%2Fwww.yoursite.com
css3
http://jigsaw.w3.org/css-validator/validator?profile=css3&usermedium=all&warning=1&lang=en&uri=http%3A%2F%2Fwww.yoursite.com

handheld

http://iphonetester.com/?url=http%3A%2F%2Fwww.yoursite.com
http://www.ipadpeek.com/?url=www.yoursite.com

other browsers

many problems (if present) will show
serious code errors in the w3c validator sites will produce blankscreens in browsershots

Valid code does not ensure the site will work ...
Invalid code does ensure the site will not work ... .. in all browser OS combinations

not all layouts work in handheld devices
examine css @media handheld { } & simplify the style and layouts for small devices

fixed size elements do not work in any device except the screen they were designed on, current best practice is em or % for layout, scalar quantities that auto-adjust to window size, screen resolution, user preference, device capability

strictly code based, you understand(care about) your content more than I do

Member Avatar for PhilEaton

two good ways to guarentee centered in setting margin-left and margin-right to auto
also if you know the width of the thing to be centered:
position: absolute;
left: 50%;
margin-left: -(WIDTH OF CENTERED THING DIVIDED BY TWO WITHOUT THESE PARENTHESES)

this second code moves the thing-to-be-centered by 50% of the width and then moves it backwards by half of the width... it works!

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.