Sentry Answers>CSS>

How to align content of a div to the bottom

How to align content of a div to the bottom

Matthew C.

—

The Problem

You have a <div> with content, for example, a container with two items:

Click to Copy
<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
</div>

You want to align the content of the div to the bottom of the container. How do you do this?

The Solution

You can make the container a flex container and then align the items to the bottom by setting the align-items property to “flex-end”. The container should have a height.

Click to Copy
.container {
  height: 350px;
  display: flex;
  align-items: flex-end;
}

If you want the main axis of the flex container, which is the direction that the flex items are laid out in, to be going down the page, you can change the flex-direction property to “column” and justify the content to the end of the flexbox:

Click to Copy
  flex-direction: column;
  justify-content: flex-end;

Note that you can’t justify individual flex items by setting justify-self: flex-end; because there is no justify-self in Flexbox.

If you want to move all of the flex items down except the first flex item, you can set the margin-bottom of the first item to auto:

Click to Copy
.container {
  height: 350px;
  display: flex;
  flex-direction: column;
}

.item1 {
  margin-bottom: auto;
}

This will push the other items to the bottom.

Further Reading

If you’re looking to get a deeper understanding of how web performance optimization works, take a look at the following articles:

  • Syntax.fmHasty Treat - CSS Grid Masonry (Grid Level 3)
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fmHasty Treat - CSS Grid Level 2 aka Subgrid
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
© 2024 • Sentry is a registered Trademark of Functional Software, Inc.