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
-
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:
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
-
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.
-
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.
-
You're welcome. :)