Member Avatar for ON_Jtharpe

Hey guys I am having trouble with my CSS. I am doing work with Drupal and I am re-styling the CSS for the site. I have it laid out the way I want buy on some web browsers my wrapper or the center of the page where the content is does not proportion itself to the browser it is usually off to the right.

Here is the wrapper code. Let me know if you need any more info.

#wrapper {
  margin-top:50px;
  margin-right: 230px;
  margin-left: 230px;
  padding: 0 10px;
  width: 940px;
  background: #666666;
  border:solid #50021B 5px;

Thanks in advance,
Justin

  • 3 Contributors
  • 4 Replies
  • 108 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by ON_Jtharpe

Dani AI

Generated

Good call by — centering with auto side gutters is the right basic fix, and pointed to the same idea. For anyone who sees the wrapper centered in one environment but offset in another, a few practical checks and stronger patterns make the layout reliable across screens.

First, diagnose with the browser dev tools: inspect the wrapper and look at its computed box model. Add up the horizontal space as
width + margin-left + margin-right + padding-left + padding-right + border-left + border-right.
If that total exceeds the viewport width the browser will push the box and it will appear off-center. Also confirm the page isn’t in quirks mode (valid DOCTYPE) and that a floated or absolutely positioned element isn’t shifting the layout.

To make centering robust and responsive, two patterns work well. One makes sizing predictable by including padding and borders in the width calculation; the other centers via Flexbox so you don’t rely on side margins:

/* include padding and borders in width calculation */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
/* Flexbox centering alternative */
body { display: flex; justify-content: center; }
.site-wrapper {
  max-width: 1000px;
  width: 100%;
  padding: 0 16px;
}

Finally, add a simple media query to reduce gutters on narrow viewports, and use dev tools to toggle CSS properties while resizing to confirm behavior. For deeper reading on box-sizing and centering techniques, see the MDN box-sizing reference and the CSS-Tricks centering guide:
box-sizing
Complete Guide to Centering

Recommended Answers

All 4 Replies

Member Avatar for floatingDivs

margin-left: auto;
margin-right: auto;

Member Avatar for teedoff

Not sure I am understanding your issue. Are you saying you want your site content centered in the browser no matter what the size?

If so then set your wrapper div to:

#wrapper {
margin: 50px auto 0 auto;
}

Edited by teedoff because: n/a
Member Avatar for ON_Jtharpe

Let me give an example the site is viewed on a 1024x768 screen the content is centered however on my 13 inch mac air it is not. How can I make it center no matter the size.

Member Avatar for ON_Jtharpe

Never mind guys thank you teedoff that worked great!!!!!

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.