将div并排放置在固定宽度和高度的绝对div内

Question

I am facing problem while centering a div of fixed width & height and placing two divs side by side inside it. What i want to achieve, at later point of time, is the slide to left effect on the second div (on top of first div) based on some event. Below is what i tried:

HTML:

<div id="center">
    <div id="firstel"></div>
    <div id="secondel"></div> 
</div>

CSS:

#center{
    position:absolute;
    border:1px solid black;
    width:200px;
    height:100px;
    overflow:hidden;
    top:50%;
    left:50%;
}
#firstel{
    background-color:red;
}
#secondel{
    background-color:blue;
}

#firstel,#secondel{
    position:relative;
    width:200px;
    height:100px;
    display:inline-block;
    float:left;
}

JSFIDDLE: link

Any help is appreciated!

Answer 1

#center{
    position:absolute;
    border:1px solid black;
    width:100%; //change this
    overflow:hidden;
    top:50%;
    left:50%;
}

Demo here

Answer 2

#center and #firstel,#secondel ID's were of same width(200px), If you need to show side by side eitherof the ids values have to be changed

You can try like this: Demo

#firstel,#secondel{    
    width:50%; /* changed value in % or you can use 100px too as per your need */
    height:100px;
    display:inline-block;
    float:left;
}

Answer 3

if u want the two divs side by side change the widths of the divs change the divs width that shoild be less than the parent div width

#firstel,#secondel{
position:relative;
width:100px;
height:100px;
display:inline-block;
float:left;

}