div sur coner en haut à gauche et en bas à droite de div div

Question

Je veux positionner la première div en haut à gauche de la div parente et la seconde div en bas à droite de la div parente. Voici mon code!

<div class="parent"> 
<div class="tl">TopLeft</div> 
<div class="br">BottomRight</div> 
</div> 

Voici mon css,

.parent 
    { 
     width: auto; 
     height:300px; 
     background: Black; 
    } 

    .tl 
    { 
    width:100px; 
    height:40px; 
    background:Aqua; 
    } 

.br 
    { 
    position:absolute; 
    width:100px; 
    height:40px; 
    right:0; 
    bottom:0; 
    background:Aqua; 
    } 

Par mon code, le topLeft div est dans la bonne position, mais le div inférieur droit est en dehors de la div parent. Vous voulez savoir ce dont j'ai besoin dans mon code!

Voici Fiddle!

Answer 1

Vous devez définir la propriété position de l'élément parent sur relative. Cela permettra aux enfants de se positionner correctement par rapport au parent plutôt qu'au document.

.parent { 
    ... 
    position: relative; 
} 

Exemple: http://jsfiddle.net/grc4/dQCpy/1/

Answer 2

.parent 
{ 
    width: auto; 
    height:300px; 
    background: Black; 
    position:relative; 
} 

Parent doit avoir une position relative.

Answer 3

<style> 
.parent{ 
background-color: yellow;width: 500px; 
} 

.tl{ 
background-color: yellowgreen;float: left;width: 200px; 
} 
.br{ 
background-color: wheat;float: right;width: 100px; 
} 
.clr{ 
clear:both; 
} 
</style> 

<div class="parent"> 
<div class="tl">TopLeft</div> 
<div class="clr"></div> 
<div class="br">BottomRight</div> 
<div class="clr"></div> 
</div>