How to position a div at the bottom of its container using CSS?
Last Updated :
11 Jul, 2025
The ability to position a <div> at the bottom of its container is a common requirement in modern web design—used in approximately 60–70% of responsive layouts for elements like footers, buttons, and captions. It ensures that the content stays aligned with the lower boundary of its parent container, regardless of the container’s height.
This can be achieved using several CSS techniques such as absolute positioning, Flexbox, and CSS Grid, each offering different levels of layout control and responsiveness.
Using Absolute Positioning
Using absolute positioning in CSS involves setting position: absolute; on an element, which positions it relative to its closest positioned ancestor (one with position: relative;, absolute; , or fixed;). By setting bottom: 0; , the element is aligned at the bottom of the container.
Example 1: In this example, we position a div (sub_div) at the bottom of its container (main_div) using absolute positioning. The main container is styled with dimensions, background color, and centered text, while the bottom div contains a paragraph.
index.html
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>Position a div at bottom</title>
<style>
.main_div {
<!--Driver Code Ends-->
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">
<!--Driver Code Starts-->
<h1>GeeksforGeeks</h1>
<div class="sub_div">
<p>A computer science portal for geeks</p>
</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
Output: 
Using Flexbox
Using Flexbox in CSS involves setting display: flex; on a container to enable flexible layout control. To position a div at the bottom, apply margin-top: auto; to the target div, which pushes it to the bottom within the flexible container, adapting to different screen sizes.
Example 2: This example we use Flexbox to position a div (bottom-div) at the bottom of its container (container). The container is styled with flex properties for responsive vertical alignment.
index.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>GeeksforGeeks</h1>
<div class="bottom-div">
<p>A computer science portal for geeks</p>
</div>
</div>
</body>
</html>
Output:
Using Grid
Using Grid in CSS involves setting display: grid; on a container to create a structured layout with rows and columns. To position a div at the bottom, define grid rows with grid-template-rows: 1fr auto;, reserving the bottom space for the target div.
Example 3: This example we use CSS Grid to position a div (bottom-div) at the bottom of its container (container). The container is styled with grid-template-rows: 1fr auto, ensuring the bottom div stays aligned at the bottom.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Position a div at bottom</title>
<style>
.container {
display: grid;
grid-template-rows: 1fr auto;
min-height: 200px;
width: 500px;
background-color: green;
margin-left: 100px;
}
h1 {
text-align: center;
}
p {
margin-left: 140px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<div class="bottom-div">
<p>A computer science portal for geeks</p>
</div>
</div>
</body>
</html>
Output:
Browser Support
Note: CSS is the foundation of webpages, and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples .