css “left” not working

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

1. MDN : CSS Reference -left (Best IMHO)
2. 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.

Answer 6

May I add that if you do not have the % on the left, your images will either continue to stack, or they will use the left gap "between" the edges of the original image. This was not pointed out above, and very confusing.