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

Aug 22, 2019

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

Tagged: CSS · All topics

~~~