Moving inner div to the bottom-right corner of the outer parent div

Question

I would like my inner div to be on the bottom-right corner of the outer div, by using float: right , but for some reason, it'll staying on the bottom-left corner. What am I doing wrong?

 #outer { width:100%; height:20%; border: 1px solid black; position: absolute; } #inner { width: 50px height: 50px; border: 1px solid red; position: absolute; float: right; bottom: 0; } 

 <div id = 'outer'> <div id = 'inner'> bottom-right corner; </div> </div> 

Answer 1

Add right: 0 instead.

Floating the element won't have any effect on it if it's absolutely positioned.

 #outer { width: 100%; height: 20%; border: 1px solid black; position: absolute; } #inner { width: 50px height: 50px; border: 1px solid red; position: absolute; bottom: 0; right: 0; } 

 <div id='outer'> <div id='inner'> bottom-right corner; </div> </div> 

Answer 2

change css property for outer div as below:

#inner {
     width: 50px
     height: 50px;
     border: 1px solid red;
     position: absolute;
     bottom: 0; 
     right:0
}