How to put an item at the bottom of its container using CSS
New Course Coming Soon:
Get Really Good at Git
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;
}
→ Get my CSS Handbook
→ Read my CSS Tutorial on
The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X