Aligning a div with 2 divs inside it in Center

Question

Currently im trying to get 2 divs to align in center, but not quite sure how to do it. They go to the Left side by default.

I had margin-left:14 % and it would align it somewhat in the center, but when you re-sized the window it would look weird because it aligned to the right side.

tried with with with marign-left/right:auto, but no result.

html

<div id="panels">

<div id="panel-left">           
</div>

<div id="panel-right">  
</div>

css

 #panels{ padding-top:15px; margin-left: auto; margin-right: auto; } #panel-left{ width:32%; min-width:209px; overflow:hidden; background-color:white; float:left; padding-left:25px; height:473px; } #panel-right{ width:32%; min-width:209px; height:473px; background-color:white; float:left; padding-left:25px; } 

Answer 1

Try this:

CSS

#panels{
    padding-top:15px;
    text-align:center;
    display: block;
}

#panel-left{
    width:32%;
    min-width:209px;
    overflow:hidden;
    background-color:black;
    height:473px;
    display: inline-block;
}

#panel-right{
    width:32%;
    min-width:209px;
    height:473px;
    background-color:orange;
    display: inline-block;
}

DEMO HERE

Answer 2

Try this style, I have used the box sizing css property to take care of the inherent 1px space that occurs during inline styling.

Fiddle here

Of course there was an un-closed div element in your initial code which is fixed now.

So the CSS looks like,

#panels {
    padding-top:15px;
    margin: 0 auto;
    background: cyan;
    width:50%; /* u need this */
    height:500px;
}
#panel-left {
    width:50%;
    box-sizing:border-box;
   /* min-width:209px;   By doing this you are pretty much giving the width to be 100 % */
    overflow:hidden;
    background-color:gray;
    float:left;
    padding-left:25px;
    height:473px;
    border:1px solid #000;
}
#panel-right {
    width:50%;
    box-sizing:border-box;
    /*min-width:209px;*/
    height:473px;
    background-color:white;
    float:left;
    padding-left:25px;
    border:1px solid #000;
}

Code snippet::

 #panels { padding-top: 15px; margin: 0 auto; background: cyan; width: 50%; /* u need this */ height: 500px; } #panel-left { width: 50%; box-sizing: border-box; /* min-width:209px; By doing this you are pretty much giving the width to be 100 % */ overflow: hidden; background-color: gray; float: left; padding-left: 25px; height: 473px; border: 1px solid #000; } #panel-right { width: 50%; box-sizing: border-box; /*min-width:209px;*/ height: 473px; background-color: white; float: left; padding-left: 25px; border: 1px solid #000; } 

 <div id="panels"> <div id="panel-left">left</div> <div id="panel-right">right</div> </div> 

Hope this helps. Happy Coding :)