Tutorialspoint.dev

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.

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



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter