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>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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments