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

10 May, 2022
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: 
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:
  
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. 
html
<!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>
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.
hardikkoriintern
Picked
Technical Scripter 2018
CSS
HTML
Technical Scripter
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property