[HTML / CSS] Why won't this center?

[dannlea]

So basically I have two divs that I want to center in the middle of the page. They extend from the top to bottom, no matter the page size.  Here's my code:

Code: [Select]

html, body, #backdrop, #content {
min-height: 100%;
height: 100%;
}
html {
background: url(img/bg.png) fixed;
width: 850 px;
margin: auto 0px;
}

body {
width: 850 px;
margin: auto 0px;
}

#backdrop {
background: #2c0000;
width: 850px;
margin: auto 0;
}
#content {
background: #000;
width: 830px;
margin: auto 0px;
}
The HTML is set up perfectly. I have the HTML inside the divs in the correct order.

It goes HTML > BODY > BACKDROP > CONTENT

So it all works great. Except... It doesn't center. All the divs are over to the left.

Anyone know why?

Thanks,
Dan

[Paddoo]

It's because you switched the margins order. When using only two arguments, it's vertical first, then horizontal.
So "margin 0 auto;" should work.

[dannlea]

I had my doubts because I figured I would have tried something so obvious, seeing that I have been coding for 4+ years now... Of course I didn't! Haha, thank you greatly. Much appreciated.

[Paddoo]

You're welcome.