How to align content of a div to the bottom?

Sandra Emily 746 05 Jun 2024

Sandra Emily

Student

Content writing is the process of writing, editing, and publishing content in a digital format. That content can include blog posts, video or podcast scripts, ebooks or whitepapers, press releases, product category descriptions, landing page or social media copy and more.

1 Answers

Ashutosh Patel 06 Jun 2024

Align div content to the bottom

To align the content of a div to the bottom, you can use the align-items property if the parent container is a flex container.

You can also use the position property if you want to align it with n its parent. Whether it's a flex container or not.

There are two methods to achieve this,

1. Using flexbox (align-items)

HTML

<div class="container">
 <div class="content">
   <!-- Your content here -->
 </div>
</div>

CSS

.container {
 display: flex;
 align-items: flex-end; /* Align items to the bottom */
 height: 300px; /* Set height for demonstration */
}

2. Using Positioning

HTML

<div class="container">
 <div class="content">
   <!-- Your content here -->
 </div>
</div>

CSS

.container {
    position: relative; /* Position the container */
    height: 300px; /* Set height for demonstration */
}
.content {
    position: absolute; /* Position the content */
    bottom: 0; /* Align the content to the bottom of the container */
}

Choose the method that best fits your layout and requirements. Flexbox is generally more flexible and easier to manage for aligning items within a container, especially if the layout is dynamic.

Positioning is useful for aligning content relative to its containing element, regardless of its relationship to other elements.

Example-

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Right-align Flex Items</title>
  <style>
    /* Align bottom using Using Flexbox */
    .container {
      border: gray solid 1px;
      display: flex;
      align-items: flex-end; /* Align items to the bottom */
      height: 100px; /* Set height for demonstration */
    }
/* this is the contect display in the bottom using Positioning */
    .container-2 {
      border: gray solid 1px;
      position: relative; /* Position the container */
      height: 100px; /* Set height for demonstration */
    }
    .content-2 {
      position: absolute; /* Position the content */
      bottom: 0; /* Align the content to the bottom of the container */
    }
  </style>
</head>

<body>
  <h3>Align bottom using Flexbox</h3>
  <div class="container">
    <div class="content">
      <p>this is the contect display in the bottom</p>
    </div>
  </div>

  <h3>Align bottom using Positioning</h3>
  <div class="container-2">
    <div class="content-2">
      <p>this is the contect display in the bottom using Positioning</p>
    </div>
  </div>

</body>
</html>

Output-

forum

How to align content of a div to the bottom?

Can you answer this question?

1 Answers

Align div content to the bottom

1. Using flexbox (align-items)

2. Using Positioning