You need to add bottom: 0 in the .kid_card h4 css.
Solution 1 :
Solution 2 :
The problem is that your <h4> is inside the <div class="text_container"> but you give the css property position: relative to <div classkid_card> which contains <div class="text_container">. You need to give the css property position: relative to <div class="text_container"> and set its size as well.
Solution 3 :
Set #coas_content height to 100%
Problem :
I’m developing a website and I need to positionate some text (h4) on the bottom of a div but I’m having problems to solve it.
I had used position tags, bottom, margin-bottom … but had no effect, so I decided to post this question searching for a solution.
This is an image of the content.
#coas_content {
margin-top: 2%;
text-align: center;
height: 72%;
}
.row{
height: 30%;
width: 100%;
padding: 5px;
}
.kid_card{
width: 33%;
height: 100%;
float: left;
background-size: cover;
position: relative;
}
.kid_card h2{
text-align: initial;
margin-top: 0;
}
.kid_card h4{
text-align: initial;
position: absolute;
}
.kid_card a{
text-decoration: none;
text-align: initial;
margin-bottom: 0;
}<div id="coas_content">
<t t-if="kid_id">
<div class="row">
<div class="kid_card" style="background-image:
url(/prueba_coas_education_website/static/src/img/icon1.png);">
<div class="text_container">
<h2><b>Calificaciones</b></h2>
<h4><a href="https://www.w3schools.com">
<i class="fa fa-asterisk"></i>
Ver calificaciones</a></h4>
</div>
</div>Comments
Comment posted by stackoverflow.com/questions/15358646/…
Take a look at
Comment posted by Put text at bottom of div
Does this answer your question?