Member Avatar for Member #733618

Hello, I'm trying to do a margin-left depending on the resolution of the screen...
I want to margin the page to hold it in the center all... like daniweb... you can see that all is centered, but then you can move things to the left and right like logo and adds... I think that I could do this with a div, and then put all inside and put it centre and it will be centre depending on resolution, am I right ???

  • 4 Contributors
  • 5 Replies
  • 186 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by Member #733618

Dani AI

Generated

Short answer: put your page content in a centered, constrained wrapper and make that wrapper responsive — then place logos/ads outside or relative to that wrapper so they can sit left/right while the main content remains centered.

As hinted, the wrapper must have a constrained width for centering to work, but a single fixed pixel width isn't ideal for modern screens. Build a responsive wrapper that uses a max-width and fluid inner padding so it scales on small screens yet stays comfortable on large monitors. was right that auto margins are involved; 's example used commas (which is invalid CSS) — use spaces for shorthand.

Example pattern (modern, simple):

/* center and keep content flexible */
body { display: flex; justify-content: center; }
.site-wrapper {
  width: 100%;
  max-width: 1200px;
  padding: 0 16px;
}

To keep logos/ads off to the sides while the wrapper stays centered, put them in a full-width header/footer or absolutely-positioned elements anchored to the viewport (not inside the fixed-width wrapper). Use media queries to hide or move side ads on narrow viewports.

Practical tips: choose a reasonable max-width (1000–1400px depending on design), use percentage widths or min()/clamp() for fine control, and test at common breakpoints (mobile, tablet, desktop). If centering still fails, inspect with browser dev tools — common causes are an auto width on the wrapper, a float or absolute positioning you forgot, or an incorrect DOCTYPE.

Recommended Answers

All 5 Replies

Member Avatar for kooia

Maybe I misunderstood you, but this is very common:

display: block;
margin-left: auto;
margin-right: auto;
/*OR...0*/
margin-left: 0 auto;
margin-right:  0auto;

I'm not sure which is correct, but it's something like that.

Edited by kooia because: n/a
Member Avatar for Member #733618

It dosen't work... thanks anyway !

Member Avatar for jsmall26

If you're talking about the width, you could say

<style>
    body{margin: 0px, 5%, 0px, 5%;}
</style>

... is that what you're talking about?

Member Avatar for drjohn

To center a page, first it must have the entire content inside the outermost div, which must have a width applied in the css. Then you add margin:auto to that div's css and that's it done.
eg assuming like most people your outermost div has the id = "wrapper" (it's just traditional to call it wrapper, it doesn't matter what it's called)

#wrapper{
width:960px; /* or whatever you're using, but not the size of your own personal screen! */
margin:auto;
rest of your css styles for wrapper follow.

}

PS as for saying display:block - divs ARE block automatically...

Edited by drjohn because: n/a
Member Avatar for Member #733618

To center a page, first it must have the entire content inside the outermost div, which must have a width applied in the css. Then you add margin:auto to that div's css and that's it done.
eg assuming like most people your outermost div has the id = "wrapper" (it's just traditional to call it wrapper, it doesn't matter what it's called)

#wrapper{
width:960px; /* or whatever you're using, but not the size of your own personal screen! */
margin:auto;
rest of your css styles for wrapper follow.

}

PS as for saying display:block - divs ARE block automatically...

Thanks ! It works !!!! I had had my width: auto; and margin: auto; and all the time, all to the left and now I understand why, thanks again, and should I use bigger width for bigger screens ???

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.