/ #html #web 

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>

Example