paragraph within a div at very bottom

Question

How can I position a paragraph within a div to the very bottom?

I am trying a position-relative (on div), position-absolute (on p) combo but it doesn't work. I want the "Read more" text to be at the very bottom of the div because there are several of these divs next to each other and they very in text length.

HTML:

<div class="card-body">
 <h3><a href="project2.html">Joia</a></h3>
  <p>Concept design for an eCommerce solution for a local art store (exercise).</p>
  <p class="read-more"><a href="project2.html">Read More</a></p>
</div>

CSS:

 .card-body {
        position: relative;
    }

    .read-more {
        position: absolute;
        bottom: 0;
        left: 0;
    }

BTW: you can inspect it here: www.stephankardos.com It's the cards that you find under the expandable / underlined section. — Stephan - the curious, Jan 20 '20 at 11:23
consider reading *all* the answers of the duplicate and you will find better way than absolute — Temani Afif, Jan 20 '20 at 11:30
@TemaniAfif no need to close the thread. My question differs since I dont have a fixed height. — Stephan - the curious, Jan 20 '20 at 11:46
where in the duplicate it's refering to fixed height? all the answers works whataver the height of the container — Temani Afif, Jan 20 '20 at 11:48
@TemaniAfif My initial CSS did not have height! I wanted the div to grow depending on paragraph length. The last paragraph of each card, should be on the same level. — Stephan - the curious, Jan 20 '20 at 11:50

score 0 · Answer 1 · answered Jan 20 '20 at 11:28

0

Flexbox can do this without positioning:

* {
  margin: 0;
  padding: 0
}

.card-body {
  display: flex;
  flex-direction: column;
  height: 150px;
  border: 1px solid grey;
}

.read-more {
  margin-top: auto;
}

<div class="card-body">
  <h3><a href="project2.html">Joia</a></h3>
  <p>Concept design for an eCommerce solution for a local art store (exercise).</p>
  <p class="read-more"><a href="project2.html">Read More</a></p>
</div>

answered Jan 20 '20 at 11:28

Paulie_D

107,962
13
142
161

You can show here. Refer this link https://codepen.io/joxmar/pen/NqqMEg – Kinnu123 Jan 20 '20 at 11:29
Hmmm ... it doesn't work on my site :/ – Stephan - the curious Jan 20 '20 at 11:30
Flexbox doesn't work, because I can't specify a certain height. The paragraphs between header and last sticky-to-bottom paragraph vary. – Stephan - the curious Jan 20 '20 at 11:44
Flexbox probably will work as I assume you have multiple cards all the same height. The height in the demo is just for demo purposes. – Paulie_D Jan 20 '20 at 11:46
Actually, the full structure is

The img has 50vh. The div doesnt have a size – Stephan - the curious Jan 20 '20 at 11:54
But your articles do so all you have to do is extend the flex solution upwards so that your card-body elements are all the same height. – Paulie_D Jan 20 '20 at 12:02

paragraph within a div at very bottom

1 Answers1