Align div to the bottom of the page in 3 steps
Aligning an element at the bottom of the page is a very common issue in web development and css. You will find the best practices for aligning the div at the bottom of the page.
Step 1 : Setting the parent position to relative.
If you want to align a div at the bottom of a parent div, the parent should have a position : relative
.
<style>
.parent {
position: relative; /* Set parent position to relative */
}
</style>
<div class="parent">
<div class="bottom"></div>
</div>
Step 2 : Setting the div position to absolute.
The div that we want to align at the bottom should have a position : absolute
.
<style>
.parent {
position: relative;
}
.bottom {
position: absolute; /* Set div position to relative */
}
</style>
<div class="parent">
<div class="bottom"></div>
</div>
Step 3 : Setting the bottom property to 0;
The div that we want to align at the bottom should have a bottom : 0;
.
<style>
.parent {
position: relative;
}
.bottom {
position: absolute;
bottom: 0; /* set the bottom to 0*/
}
</style>
<div class="parent">
<div class="bottom"></div>
</div>
Optional : bottom right
If you want to position the div to bottom right, you should add right : 0;
.
<style>
.parent {
position: relative;
}
.bottom {
position: absolute;
bottom: 0;
right: 0; /* set the right to 0 */
}
</style>
<div class="parent">
<div class="bottom"></div>
</div>