How to make width of absolutely positioned div same as its parent div?

Question

I am trying to display an absolutely positioned div inside floating div. Here is my HTML so far.

#outer
{ 
    float:left;
    width:500px; 
    border: 1px solid red; 

}

#inner
{
    left:0;
    position:absolute;
    border: 1px solid black;
    width:100%
}


<div id='outer'>
    <div id='inner'>
        some text inside div
    </div>
</div>

I have an outer div whose width is being set as percentage of its parent div. 'outer' div contains an absolutely positioned 'inner' div. I want to make width of the inner div same as outer div which is not working. Can somebody suggest a way to do this?

Answer 1

Give position:relative; to your #outer div. write like this

#outer
{ 
    float:left;
    width:500px; 
    border: 1px solid red; 
    position:relative
}

check this http://jsbin.com/ifuxum/2/edit#html,live

Answer 2

#inner
{
    left:0;
    right:0;
    position:absolute;
    border: 1px solid black;
}