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

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:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>               

chevron_right


Output:
position bottom

Example 2: 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {
                height: 100%;
                background-color:green;
            }
            .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>GeeksforGeeks</h1></td>
            </tr>
            <tr>
                <td valign="bottom"><p>A computer science 
                portal for geeks</p></td>
            </tr>
        </table>
    </body>
</html>

chevron_right


Output:
position bottom



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.