forum

Home / DeveloperSection / Forums / How to align content of a div to the bottom?

Ask Question
Sandra Emily

Sandra Emily

Follow
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.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

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- 

 

answer 6518920606013656

 

 

MindStick Training

Liked By