How to Align Content of a DIV to the Bottom Using CSS
Topic: HTML / CSSPrev|Next
Answer: Use the CSS position Property
You can use the CSS positioning method to align the content of a DIV to the bottom.
In the following example the DIV element with .content class will be placed at the bottom of the .box DIV element. Let's try it out to understand how it actually works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Align Content of a Div to the Bottom</title>
<style>
.box{
color: #fff;
background: #000;
position: relative;
min-height: 200px;
padding-bottom: 30px; /* to avoid content overlapping */
}
.box .content{
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<h1>Page Title</h1>
<div class="content">This piece of text will remain at the bottom of the parent div all the time.</div>
</div>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
