I have this card:
.do_card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 220px;
height: 320px;
}
.do_container {
padding: 2px 16px;
}<div class="do_card">
<img src="https://picsum.photos/200/300" style="width:220px;height:150px;margin-left:auto;margin-right:auto;display:block;">
<div class="do_container">
<p style="text-align: center;">Lorem Ipsum</p>
<div style="display: flex; justify-content: space-between;">
<p><a href="https://www.test.com" style="color:black"><i class="test"></i> GET IT</a>
<p>Like</p>
</div>
</div>
</div>How can I get the "GET IT" and "Like" to always be at the bottom of the card?
Setting the do_card to position: relative; and the div with "Get it" and "Like"
to position: absoulute; bottom:0px; does not work
>Solution :
To make sure the content set to absolute remains within the desired element (card in your case), make sure to set its parent to position: relative; (.do_card in your case)
It does seem to work for me as mentioned in the comment:
<style>
.do_card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 220px;
height: 320px;
position: relative;
}
.do_container {
padding: 2px 16px;
}
</style>
<div class="do_card">
<img src="https://picsum.photos/200/300" style="width:220px;height:150px;margin-left:auto;margin-right:auto;display:block;">
<div class="do_container">
<p style="text-align: center;">Lorem Ipsum</p>
<div style="display: flex; justify-content: space-between; position: absolute; bottom: 0; width: 100%; box-sizing: border-box; padding: 0 16px; left: 0;">
<p><a href="https://www.test.com" style="color:black"><i class="test"></i> GET IT</a>
<p>Like</p>
</div>
</div>
</div>