How to Align Content of a Div to the Bottom using CSS?

Here are different ways to align the content of a div to bottom using CSS.

1. Using Positioning

The positioning involves setting the parent container to position: relative and the content to position: absolute with bottom: 0, which places the content at the container's bottom edge.

Syntax

position: absolute;
bottom: 0;

<div style="border: 1px solid green; 
            float: left; height: 180px; 
            margin: 2px; position: relative;">

    <h2 style="text-align: center;">
        A computer science portal for geeks
    </h2>
    <div style="position: absolute; 
                            bottom: 0; left: 0;">
        Bottom Aligned Content Div
    </div>
</div>

Output

2. Using Flexbox

Using Flexbox to align content to the bottom involves setting the container's display to `flex` and applying align-items: flex-end. This positions the child elements at the bottom of the container, achieving the desired alignment.

Syntax

display: flex;
flex-direction: column;

<div style="display: flex; flex-direction: column; 
            justify-content: flex-end; 
            border: 1px solid black; 
            height: 200px; width: 200px; padding: 10px;">
    <div style="background-color: lightgreen; 
                padding: 10px; text-align: center;">
        Bottom Content
    </div>
</div>

Output

3. Using Grid Layout

The Grid Layout approach involves setting the container to display: grid and using align-items: end, which places the content at the bottom of the grid area, aligning it to the container's lower edge.

Syntax

display: grid;
align-items: end;

<div style="display: grid; align-items: end; 
            border: 1px solid green; 
            height: 200px; width: 200px; padding: 10px;">
    <div style="background-color: lightgreen; padding: 10px; 
                text-align: center;">
        Bottom Content
    </div>
</div>

Output

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.