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

Aug 22, 2019

Learn how to put an item at the bottom of its container in CSS by giving the child position: absolute and bottom: 0, with position: relative on the parent.

~~~

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;
}

Tagged: CSS · All topics

~~~