2 side by side divs centered? - html

Question

Well i have 2 divs that i want to be side by side and aligned in the center of the page?
HTML:
<div id="box"></div>
<div id="box"></div>
CSS:
#box
{
width: 450px;
color: #ffffff;
height: 500px;
text-align: center;
padding-top: 15px;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color:#666;
border-radius:15px;
float:left;
margin-right:15px;}
This is what it looks like right now:
(I cant post photo's because i dont have 10 rep sorry!) but i want them to be under and aligned to the nav bar. Thank you.

Answer 1

What you need here is use inline-block instead of float that allows you to use the text-align property on the parent. Try this:
.box {
/*float:left; Remove this*/
display:inline-block; /*Add this*/
}
Since ID must be unique I use .box add that class on the divs
And on the parent use:
body {
text-align:center;
}
I use body in this case I don't see any other parent but change it for the real one
Check this Demo http://jsfiddle.net/WJfx5/
Also you can read This Article to know about the use of inline-block elements

Answer 2

put this 2 divs in another big div, and add margin: 0 auto; to it and a width.
<div class="bigdiv">
<div class="box"></div>
<div class="box"></div>
</div>
.bigdiv { margin:0 auto; width: 930px }
.box:last-child {margin-right: 0px;}

Answer 3

Create a wrapper around those div like
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
</div>
Then with css
#wrapper {
text-align: center;
width: ??; //add yours
height: ??; //add yours
}
FYI: id should be unique
Updates:
.box {
width: 450px;
color: #ffffff;
height: 500px;
display: inline-block;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color:#666;
border-radius:15px;
}
#wrapper{
text-align: center;
}
JSFiddle