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: