In this example, we will learn how to position a div at the bottom of its container using CSS. We will be using the position
and bottom
property along with other CSS properties.
HTML
<div class="container">
<span class="my_div">Hello ScanSkill from bottom of the container</span>
</div>
CSS
.container {
position: relative;
height: 300px;
background-color: red;
color: white;
}
.my_div {
position: absolute;
bottom: 0px;
}
Output
Here, we positioned the container relative to the browser’s viewport using position: relative
and positioned the my_div
relative to the container using position: absolute
and made it display at a distance of 0px
from the bottom using bottom: 0px
. We specified the background color, height, and padding using background-color
, height
, and padding
property.
In this example, we learned how to position a div at the bottom of its container using CSS. We used the position
and bottom
property along with other CSS properties.