CODEWITHSUNDEEP
htmlcss
Nilesh
Nilesh

Reputation: 6155

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

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?

Upvotes: 2

Views: 2805

Answers (2)

sandeep
sandeep

Reputation: 92793

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

Upvotes: 8

Sujith Kumar KS
Sujith Kumar KS

Reputation: 1043

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

Upvotes: 2

Related Questions