/ #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.

Receive my latest articles by subscribing to my mailing list http://eepurl.com/h6jxnr

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




Buy Me A Coffee
Author

Omar Ghader

Fullstack web engineer and devops. Mobile web specialist