Setting the position of the div at the bottom of its container can be done using the bottom, and position properties. Set the position value to absolute and the bottom value to zero to place a div at the bottom of the container. Position attribute can take multiple values which are listed below:
- absolute: This property is used when the position of a division is relative to its parent (used in this example).
- relative: This property is used when the position of a division is relative to other components on the screen.
- fixed: This property is used when the position of a component is fixed on the screen irrespective of other HTML components (like a footer note).
The position property along with attributes like left, right, top, and bottom, can be used to display appropriate positioning.
Example 1:
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: 
Example 2: In this example, use table to display the content at the bottom of the body. The top and bottom property is used to set the content at top and bottom position.
html
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
background-color:green;
}
.main_div {
height: 100%;
width:100%;
border-collapse: collapse;
}
h1, p {
text-align:center;
}
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<table class="main_div">
<tr>
<td valign="top">
<h1>GeeksforGeeks</h1>
</td>
</tr>
<tr>
<td valign="bottom">
<p>
A computer science
portal for geeks
</p>
</td>
</tr>
</table>
</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.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
02 Aug, 2023
Like Article
Save Article