How to use Absolute Positioning In CSS
This approach uses position: absolute; bottom: 0; to place the div at the bottom relative to its closest positioned ancestor.
Example 1: This example shows the positioning of a div at the bottom of its container using absolute positioning.
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>w3wiki</h1> <div class="sub_div"> <p>A computer science portal for geeks</p> </div> </div></body></html> |
Output:
How to position a div at the bottom of its container using CSS?
To position a div at the bottom of its container in CSS, you can use various approaches. Using absolute positioning involves setting `position: absolute;` and `bottom: 0;`, aligning the div at the container’s bottom. Flexbox achieves this by employing `display: flex;` and `margin-top: auto;`, while Grid utilizes `display: grid;` with a defined template that reserves space at the bottom for the targeted div.
Table of Content
- Using Absolute Positioning
- Using Flexbox
- Using Grid
Contact Us