How To Position a Div at The Bottom of Its Container USing Css

Posted By Bajarangi soft , Posted On 09-10-2020

Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.

Position attribute can take multiple values which are listed below:

absolute: This property is used when position of a division is relative to its parent (used in this example).
relative: This property is used when position of a division in relative to other components on the screen.
fixed: This property is used when position of a component to be fixed on screen irrespective of other HTML components (like a footer note).

The position property along with attributes like, left, right, top and bottom, can be used to display appropriate positioning.
Example 1:

<!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: #d02a25;
        }
        .sub_div {
            position: absolute;
            bottom: 0px;
        }
        p {
            margin-left:110px;
        }
    </style>
</head>
<body>
<div class="main_div">
    <h1>Bajarangi Soft</h1>
    <div class="sub_div">
        <p>A computer  portal </p>
    </div>
</div>
</body>
</html>

In this example, use table to display the content at the bottom of the body. The top and bottom property is used to set the content at top and bottom position.
Example 2:

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            height: 100%;
            background-color: #e3cb2e;
        }
        .main_div {
            height: 100%;
            width:100%;
            border-collapse: collapse;
        }
        h1, p {
            text-align:center;
        }
        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<table class="main_div">
    <tr>
        <td valign="top"><h1>Bajarangi Soft</h1></td>
    </tr>
    <tr>
        <td valign="bottom"><p>A computer
            portal </p></td>
    </tr>
</table>
</body>
</html>

Related Post

How To Set Up Bottom Navigation Bar In Flutter App
How To Add Background Gradient In Bottom Navigation bar Flutter
Bottom Navigation Bar With Different Design In Flutter
How To Set Up Bottom Navigation Bar With Icons In Flutter
How To Add Wave Clipper Bottom Animation In Flutter
How To Create Bottom Notification Badge In Flutter Android
How To Use Bootstrap Container Class
How To Position a Div at The Bottom of Its Container USing Css
Different Style Container Widget On Button Click In Flutter
Containers In Bootstrap With Examples
How To Align Div At The Center Of Container Using CSS