CODEWITHSUNDEEP
htmlcsspositioning
Oto Shavadze
Oto Shavadze

Reputation: 42753

css "left" not working

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/

Upvotes: 14

Views: 37696

Answers (5)

Mateusz Rogulski
Mateusz Rogulski

Reputation: 7445

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

Upvotes: 6

NullPoiиteя
NullPoiиteя

Reputation: 57322

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

Upvotes: 11

John Peter
John Peter

Reputation: 2928

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.

Upvotes: 2

Tom Walters
Tom Walters

Reputation: 15616

Use:

margin-left: 50%;

Or:

position:relative;
left:50%;

Upvotes: 3

Paul Fleming
Paul Fleming

Reputation: 24526

You need to set position to absolute or relative:

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   position: absolute;
   left: 50%;
}

Upvotes: 33

Related Questions