How to position a div at the bottom of its container using CSS?
Last Updated :
10 Sep, 2024
Positioning a div at the bottom of its container means aligning the div so that it stays at the lowest point within the container's boundaries.
This can be done using CSS techniques like absolute positioning, Flexbox, or Grid, each method providing different layout control options.
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: In this example we positions 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.
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>GeeksforGeeks</h1>
<div class="sub_div">
<p>A computer science portal for geeks</p>
</div>
</div>
</body>
</html>
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: 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.
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: 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.
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:
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 .
Similar Reads
Create an Unordered List Without Bullets using CSS
To create an unordered list without bullet points, the CSS list-style-type property is used. This removes the default bullet points from the list items, and making the list appear plain.Table of ContentUsing list-style-type property Remove margin and padding after removing bullet pointsUnordered Lis
1 min read
Set cellpadding and cellspacing in CSS
Cell Padding The cell padding is used to define the spaces between the cells and its border. If cell padding property is not applied then it will be set as the default value. Example: html <!DOCTYPE html> <html> <head> <title>cell padding</title> <style> table, th
1 min read
How to overlay one div over another div using CSS
Creating an overlay effect simply means putting two div together at the same place but both the div appear when needed i.e while hovering or while clicking on one of the div to make the second one appear. Overlays are very clean and give the webpage a tidy look. It looks sophisticated and is simple
2 min read
How to disable a link using only CSS?
To disable a link using CSS, pointer-events can be used, which sets whether the element in the page has to respond or not while clicking on elements. The pointer-events property is used to specify whether the element should respond to pointer events or not. The following example illustrates this app
3 min read
What does the “+†(plus sign) CSS selector mean?
The "+" (plus sign) CSS selector, known as the adjacent sibling selector, targets the first element that immediately follows another specified element in the HTML structure. It applies styles only to the directly adjacent sibling after the selected element. Note: The IE8 and earlier versions </DO
1 min read
How to Vertically Center Text with CSS?
Here are three different ways to Vertically center text in CSS. Vertically center text means aligning text to appear in the middle of its container element.1. Using display PropertyWe can use display: flex to make the container as a flexbox and then applying the align-items: center to vertically cen
2 min read
How to horizontally center a div using CSS ?
To make an HTML div center horizontally using CSS is quite easy. We can horizontally center any element using the below-mentioned approaches. Before centering a div horizontally we need to create a fixed-size div. We have given a border to the div so the centering of that div can be visible. Set the
2 min read
Change an HTML5 input placeholder color with CSS
The placeholder selector in the CSS pseudo-element is used to design the placeholder text by changing the text color and it allows to modify the style of the text. In most of the browsers, the placeholder (inside the input tag) is of grey color. In order to change the color of this placeholder, non-
2 min read
How to Disable Text Selection Highlighting using CSS?
The user-select property in CSS is used to disable text selection highlighting in CSS. This feature is useful when we need to disable the copy option of content.Syntaxuser-select: none;-webkit-user-select: none; /* Chrome, Opera */-webkit-touch-callout: none; /* Safari */-moz-user-select: none; /* F
2 min read
How to Align Content of a Div to the Bottom using CSS?
Here are different ways to align the content of a div to bottom using CSS.1. Using PositioningThe positioning involves setting the parent container to position: relative and the content to position: absolute with bottom: 0, which places the content at the container's bottom edge.Syntaxposition: abso
2 min read