-1

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.

enter image description here

#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>
Turnip
  • 35,836
  • 15
  • 89
  • 111
arevilla009
  • 429
  • 3
  • 18
  • 1
    Take a look at https://stackoverflow.com/questions/15358646/css-position-div-to-bottom-of-containing-div – Philip Jan 08 '20 at 10:06
  • Does this answer your question? [Put text at bottom of div](https://stackoverflow.com/questions/5288336/put-text-at-bottom-of-div) – Rob Jan 08 '20 at 13:29

3 Answers3

0

You need to add bottom: 0 in the .kid_card h4 css.

AstroHod
  • 33
  • 4
0

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.

Matt.S
  • 287
  • 4
  • 20
0

Set #coas_content height to 100%

KristofMols
  • 3,487
  • 2
  • 38
  • 48
Md. Kamrul hasan
  • 21
  • 4