Elements the Game Forum - Free Online Fantasy Card Game

Other Topics => Off-Topic Discussions => Tech Talk => Topic started by: dannlea on May 03, 2013, 04:52:35 pm

Title: [HTML / CSS] Why won't this center?
Post by: dannlea on May 03, 2013, 04:52:35 pm
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
Title: Re: [HTML / CSS] Why won't this center?
Post by: Paddoo on May 03, 2013, 05:14:12 pm
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.
Title: Re: [HTML / CSS] Why won't this center?
Post by: dannlea on May 04, 2013, 05:01:55 am
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.
Title: Re: [HTML / CSS] Why won't this center?
Post by: Paddoo on May 04, 2013, 05:04:56 am
You're welcome.  :)
blarg: