HTML CSS div is at the bottom of the previous div
HTML CSS: Place a div below the previous div
In web development, we often encounter situations where we need to place one div element below another div element. This layout is often used to create complex page structures, making the page look more beautiful and organized. In this article, we will detail how to achieve this layout effect using HTML and CSS.
Method 1: Use position: absolute and bottom: 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div at the bottom of the previous Div</title>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
background-color: #f0f0f0;
}
.bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background-color: #3498db;
}
</style>
</head>
<body>
<div class="container">
<p>This is the top div</p>
<div class="bottom">
<p>This is the bottom div</p>
</div>
</div>
</body>
</html>
Output:
In this example, we create a container containing two div elements. We position the lower div element at the bottom of its parent element by setting its position property to absolute and using bottom: 0.
Method 2: Use flexbox layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div at the bottom of the previous Div</title>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 200px;
background-color: #f0f0f0;
}
.top {
background-color: #3498db;
width: 100%;
}
.bottom {
background-color: #e74c3c;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<p>This is the top div</p>
</div>
<div class="bottom">
<p>This is the bottom div</p>
</div>
</div>
</body>
</html>
Output:
In this example, we use a flexbox layout to position the lower div element at the bottom of its parent element. This layout effect can be easily achieved by setting properties such as display: flex, flex-direction: column, and justify-content: space-between.
Method 3: Use grid layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div at the bottom of the previous Div</title>
<style>
.container {
display: grid;
grid-template-rows: auto 50px;
height: 200px;
background-color: #f0f0f0;
}
.top {
background-color: #3498db;
}
.bottom {
background-color: #e74c3c;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<p>This is the top div</p>
</div>
<div class="bottom">
<p>This is the bottom div</p>
</div>
</div>
</body>
</html>
Output:
In this example, we use a grid layout to position the lower div element at the bottom of its parent element. This layout effect can be easily achieved by setting properties such as display: grid and grid-template-rows: auto 50px.
Through the above three methods, we can achieve the effect of placing a div element at the bottom of another div element. In actual development, you can choose the appropriate method to implement page layout based on specific needs.