Open In App

How to position a div at the bottom of its container using CSS?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

To position a div at the bottom of its container in CSS, you can use various approaches. Using absolute positioning involves setting `position: absolute;` and `bottom: 0;`, aligning the div at the container’s bottom. Flexbox achieves this by employing `display: flex;` and `margin-top: auto;`, while Grid utilizes `display: grid;` with a defined template that reserves space at the bottom for the targeted div.

Using Absolute Positioning:

This approach uses position: absolute; bottom: 0; to place the div at the bottom relative to its closest positioned ancestor.

Example 1: This example shows the positioning of a div at the bottom of its container using absolute positioning.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Position a div at bottom</title>
    <style>
        .main_div {
            text-align:center;
            position: relative;
            left: 100px;
            height: 200px;
            width: 500px;
            background-color: green;
        }
        .sub_div {
            position: absolute;
            bottom: 0px;
        }
        p {
            margin-left:110px;
        }
    </style>
</head>
 
<body>
    <div class="main_div">
        <h1>GeeksforGeeks</h1>
        <div class="sub_div">
            <p>A computer science portal for geeks</p>
        </div>
    </div>
</body>
 
</html>


Output: position bottom

Using Flexbox

This approach utilizes display: flex; and margin-top: auto; to push the div to the bottom within a flex container.

Example 2: This example shows the positioning of a div at the bottom of its container using flexbox.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Position a div at bottom</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            min-height: 200px;
            width: 500px;
            background-color: green;
            margin-left: 100px;
        }
 
        .bottom-div {
            margin-top: auto;
        }
 
        p {
            margin-left: 50px;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <div class="bottom-div">
            <p>A computer science portal for geeks</p>
        </div>
    </div>
</body>
 
</html>


Output:

position bottom

Using Grid

It uses display: grid; and grid-template-rows: 1fr auto; to create a grid layout with flexible and fixed-sized rows, positioning the div at the bottom.

Example 3: This example shows the positioning of a div at the bottom of its container using grid.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Position a div at bottom</title>
    <style>
        .container {
            display: grid;
            grid-template-rows: 1fr auto;
            min-height: 200px;
            width: 500px;
            background-color: green;
            margin-left: 100px;
        }
 
        h1 {
            text-align: center;
        }
 
        p {
            margin-left: 140px;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <div class="bottom-div">
            <p>A computer science portal for geeks</p>
        </div>
    </div>
</body>
 
</html>


Output:

Screenshot-2024-01-15-171517

CSS is the foundation of webpages, and 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.



Last Updated : 29 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads