position element with right property [duplicate] - css

Question

I have 2 divs, parent and child, I want that child left side (left border) will in center of parent.
Why this code not working? that is left: 50% for child, is not working.
<div id="outher">
<div id="inner">
</div>
</div>
css:
#outher {
width: 1000px;
height: 1000px;
background-color: #ccc;
}
#inner {
width: 400px;
height: 300px;
background-color: #090;
left: 50%;
}
demo http://jsfiddle.net/vrse2/5/

Answer 1

You need to set position to absolute or relative:
#inner {
width: 400px;
height: 300px;
background-color: #090;
position: absolute;
left: 50%;
}

Answer 2

CSS left only works with positioned elements.
Quoted from W3C
Values <length> | <percentage> | auto | inherit
Initial value auto
Applies to positioned elements
Inherited No
Try
#inner {
width: 400px;
height: 300px;
background-color: #090;
position: absolute;
left: 50%;
}
Good read
MDN : CSS Reference -left (Best IMHO)
W3C : CSS/Properties/left

Answer 3

You need to add position: absolute; to your CSS. left is used for absolute positioning.
In your case:
#inner {
width: 400px;
height: 300px;
background-color: #090;
position: absolute;
left: 50%;
}

Answer 4

Use:
margin-left: 50%;
Or:
position:relative;
left:50%;

Answer 5

Try With the following :
HTML Part :
<div id="outher">
<div id="inner">
</div>
</div>
CSS Part :
#outher {
width: 1000px;
height: 1000px;
background-color: #ccc;
}
#inner {
width: 400px;
height: 300px;
background-color: #090;
left: 50%;
margin:0 auto;
position: absolute;
}
I think this may help you to resolve your problem.