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

Difficulty Level : Easy
Last Updated : 04 Dec, 2018

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.

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

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.

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

Output:

My Personal Notes

Related Articles