CODEWITHSUNDEEP
htmlcsswordpress
Kevin Kromjong
Kevin Kromjong

Reputation: 174

Making paragraph stick to bottom with dynamic content

So I have some blocks on a website which look like this:

enter image description here

There are three blocks next to eachother. Now the problem here is that title can be one line of length, like in the image, to 4 lines of length. Depending on the length of the title, I successfully alter the content, so that the content stays within the block and doesn't overflow.

However, the buttons in all three blocks needs to be on the same height, no matter how long the content and the title are. I thought that I could make them sticky to the bottom of the block, so I already gave the parent a position: relative and the child a position: absolute, but they just don't want to stick to the bottom, they still appeared on different heights. I also fooled around with display: flex and position: fixed, but I couldn't manage to make this work.

Of course, I could manage the position of the blocks with jQuery, depending on the height of the title or something like that, but I really want to use as less Javascript as possible, because of performance.

The HTML for every block is:

<div class="post-content">
    <div class="post-header">
        <span class="cat"><a href="some-url" title="some-title">Here goes the category</a></span>
        <h2><a href="some-url">Here goes the title</a></h2>
        <span class="date">1 january 1970</span>
    </div>

    <div class="post-entry">
        <p>This is the content of the post</p>
        <p><a href="some-url" class="more-link"><span class="more-button">Read more link</span></a></p>
    </div>
</div>

I could post the CSS also, but that doesn't contain more than just some background properties, paddings for the text, etc.

So what I need is no matter how long the title or the content is, the button always needs to be sticky to the bottom.

Thanks in advance!

Upvotes: 0

Views: 106

Answers (1)

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

The problem (after discussing in the comments) is that the position: relative; was set on post-entry, instead of the outer container post-content. Changing that will fix the problem, as long as the other rules are set correctly.

Upvotes: 1

Related Questions