Skip to content

How to put an item at the bottom of its container using CSS

Find out how to stick an item at the bottom of its container using CSS

It’s a rather common thing to do, and I had to do it recently.

I was blindly assigning bottom: 0 to an element which I wanted to stick to the bottom of its parent.

Turns out I was forgetting 2 things: setting position: absolute on that element, and adding position: relative on the parent.

Example:

<div class="container-element">
  ...
  <div class="element-to-stick-to-bottom">
    ...
  </div>
</div>
.element-to-stick-to-bottom {
  position: absolute;
  bottom: 0;
}

.container-element {
  position: relative;
}

→ Here's my latest YouTube video

→ Get my CSS Handbook

→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list