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
THE AHA STACK MASTERCLASS
Launching May 27th
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
I wrote 20 books to help you become a better developer:
- Astro Handbook
- HTML Handbook
- Next.js Pages Router Handbook
- Alpine.js Handbook
- HTMX Handbook
- TypeScript Handbook
- React Handbook
- SQL Handbook
- Git Cheat Sheet
- Laravel Handbook
- Express Handbook
- Swift Handbook
- Go Handbook
- PHP Handbook
- Python Handbook
- Linux Commands Handbook
- C Handbook
- JavaScript Handbook
- CSS Handbook
- Node.js Handbook