How to use Flexbox In CSS
This approach utilizes display: flex; and margin-top: auto; to push the div to the bottom within a flex container.
Example 2: This example shows the positioning of a div at the bottom of its container using flexbox.
html
<!DOCTYPE html><html><head> <title>Position a div at bottom</title> <style> .container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-height: 200px; width: 500px; background-color: green; margin-left: 100px; } .bottom-div { margin-top: auto; } p { margin-left: 50px; } </style></head><body> <div class="container"> <h1>w3wiki</h1> <div class="bottom-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