How to position a div near the bottom side of another div with CSS?

Spread the love

To position a div near the bottom side of another div with CSS, we use flexbox.

For instance, we write

<div class="outer">
  <div class="inner"></div>
</div>

to add nested divs.

Then we write

.outer {
  display: flex;
  justify-content: center;
}
.inner {
  align-self: flex-end;
}

to make the outer div a flex container with display: flex;.

And we make the inner div stay at the bottom of the outer div with align-self: flex-end;.