How to put an item at the bottom of its container using CSS
New Courses Coming Soon
Join the waiting lists
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