2 Side By Side Divs Centered?

Well i have 2 divs that i want to be side by side and aligned in the center of the page? HTML:

CSS: #box { width

Solution 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

Solution 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;}

Solution 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