How to align content of a div to the bottom using CSS ?

Basic property of CSS:

  • position: The position property specifies the type of positioning method used for an elements. For example static, relative, absolute and fixed.
  • bottom: The bottom property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.
  • left: The left property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.
  • right: The right property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

On the basic of the value of position property the value of the other property is set.

Example: In this code, use of these three properties is shown and button shift to the bottom left corner of the div element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>align content to div</title>
        <style>
            .main {
                border: 1px solid green;
                float: left;
                min-height: 180px;
                margin: 2px;
                padding: 10px;
                min-width: 117px;
                position:relative;
            }
            .gfg {
                font-size:40px;
                color:green;
                font-weight:bold;
                tect-align:center
            }
            .geeks {
                text-align:center;
            }
            #bottom {
                position:absolute;                 
                bottom:0;                         
                left:0;                         
            }
        </style>
    </head>
    <body
        <div class="main">
            <div class = "gfg">GeeksforGeeks</div>
            <div class = "geeks">A computer science portal for geeks</div>
            <div id="bottom">Bottom Content Div</div>
        </div>
    </body
</html>                    

chevron_right


Output:

Example: In this code, below use of this three property is shown and button shift to the bottom right corner of the div element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>align content to div</title>
        <style>
            .main {
                border: 1px solid green;
                float: left;
                min-height: 180px;
                margin: 2px;
                padding: 10px;
                min-width: 117px;
                position:relative;
            }
            .gfg {
                font-size:40px;
                color:green;
                font-weight:bold;
                tect-align:center
            }
            .geeks {
                text-align:center;
            }
            #bottom {
                position:absolute;                 
                bottom:0;                         
                right:0;                         
            }
        </style>
    </head>
    <body
        <div class="main">
            <div class = "gfg">GeeksforGeeks</div>
            <div class = "geeks">A computer science portal for geeks</div>
            <div id="bottom">Bottom Content Div</div>
        </div>
    </body
</html>                    

chevron_right


Output:



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.