---
title: "How to align content of a div to the bottom?"
description: "How to align content of a div to the bottom?"
author: "Sandra Emily"
published: 2024-06-05
updated: 2024-06-06
canonical: https://www.mindstick.com/forum/160689/how-to-align-content-of-a-div-to-the-bottom
category: "css-css3"
tags: ["css-css3", "css", "css styling"]
reading_time: 3 minutes
---
# How to align content of a div to the bottom?
How to align [content](https://www.mindstick.com/articles/13019/get-the-best-content-marketing-pricing-packages-for-your-brand) of a div to the bottom?
## Replies
### Reply by Ashutosh Patel
### 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
```html
```
## CSS
```css
.container {
display: flex;
align-items: flex-end; /* Align items to the bottom */
height: 300px; /* Set height for demonstration */
}
```
#### 2. Using Positioning
## HTML
```html
```
## CSS
```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-
```html
Right-align Flex Items
Align bottom using Flexbox
this is the contect display in the bottom
Align bottom using Positioning
this is the contect display in the bottom using Positioning