Categories
CSS

How to position a div at the bottom of its container with CSS?

Spread the love

Sometimes, we want to position a div at the bottom of its container with CSS.

In this article, we’ll look at how to position a div at the bottom of its container with CSS.

How to position a div at the bottom of its container with CSS?

To position a div at the bottom of its container with CSS, we use flexbox.

For instance, we write

.parent {
  display: flex;
}

.child {
  align-self: flex-end;
}

to make the element with class parent a flex container with display: flex;.

Then we make the element with class child in the flex container stay at the bottom with align-self: flex-end;.

Conclusion

To position a div at the bottom of its container with CSS, we use flexbox.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *