Comment faire en sorte que la largeur d'une div positionnée de façon absolue soit la même que celle de sa div parente ?

Question

J'essaie d'afficher un div positionné de manière absolue à l'intérieur d'un div flottant. Voici mon HTML jusqu'à présent.

#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>

J'ai une division externe dont la largeur est définie en pourcentage de la division parent. La div 'externe' contient une div 'interne' positionnée de manière absolue. Je veux que la largeur de la div intérieure soit la même que celle de la div extérieure, ce qui ne fonctionne pas. Quelqu'un peut-il me suggérer un moyen de le faire ?

Answer 1

Donnez position:relative; à votre #outer div. écrire comme ceci

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

Vérifiez ceci http://jsbin.com/ifuxum/2/edit#html,live

Answer 2

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