How to fix one block inside another [duplicate] - html

Question

This question already has answers here:
How can I position my div at the bottom of its container?
(25 answers)
Closed 2 years ago.
I have a question how can I fix the block with likes,comments,author,inside another block,cause if I make less text it will go up
.post {
display: block;
height: 200px;
width: 800px;
background-color: rgba(63, 63, 63, 0.11);
margin: 20px 20px;
}
.title-block {
font-family: Calibri;
font-weight: 100;
font-size: 40px;
background-color: rgba(63, 63, 63, 0.09);
}
.title {
margin-left: 5px;
}
.post-categorie-block {
margin-top: 10px;
font-family: Calibri;
}
.postcat {
font-weight: 600;
}
.text-block {
font-family: Calibri;
padding: 10px 10px 10px 10px;
font-size: 28px;
}
.bottom-post-panel {
font-family: Calibri;
background-color: #cccccc;
width: 800px;
text-align: left;
margin-top: 10px;
}
.misc {
margin-left: 10px;
margin-right: 10px;
font-size: 20px;
}
<section class="blocks">
<div class="post-blocks">
<section class="post">
<article class="title-block">
<a class="title">Lorem Ipsum</a>
</article>
<div class="post-categorie-block">
<a class="cat">Категория:</a>
<a class="postcat">Lorem Ipsum</a>
</div>
<article class="text-block">
<a>Lorem ipsum dolor sit ametamet, ornare sed tellus. Quisque vel elementum dolor, non eleifend nulla. Donec ut volutpat dui, porttitor pellentesque magna.</a>
</article>
<div class="bottom-post-panel">
<a class="misc">Likes: 50</a>
<a class="misc">Comments: 10</a>
<a class="misc">Author: Lorem</a>
</div>
</section>
If I make position fixed, it will fix that block on whole page, I know that it is calculating margin from text block, but how do I make another way to fix it inside post block

Answer 1

You can set the position property of the wrapper div to relative and then in your child div set the position property to absolute and the bottom to 0px;
This will make it stick to the bottom in your wrapper div
.post {
display: block;
height: 200px;
width: 800px;
background-color: rgba(63, 63, 63, 0.11);
margin: 20px 20px;
}
.title-block {
font-family: Calibri;
font-weight: 100;
font-size: 40px;
background-color: rgba(63, 63, 63, 0.09);
}
.title {
margin-left: 5px;
}
.post-categorie-block {
margin-top: 10px;
font-family: Calibri;
}
.postcat {
font-weight: 600;
}
.text-block {
font-family: Calibri;
padding: 10px 10px 10px 10px;
font-size: 28px;
}
.bottom-post-panel {
position: absolute;
font-family: Calibri;
background-color: #cccccc;
width: 800px;
text-align: left;
bottom: 0px;
}
.post-blocks {
position: relative;
}
.misc {
margin-left: 10px;
margin-right: 10px;
font-size: 20px;
}
<section class="blocks">
<div class="post-blocks">
<section class="post">
<article class="title-block">
<a class="title">Lorem Ipsum</a>
</article>
<div class="post-categorie-block">
<a class="cat">Категория:</a>
<a class="postcat">Lorem Ipsum</a>
</div>
<article class="text-block">
<a>Lorem.</a>
</article>
<div class="bottom-post-panel">
<a class="misc">Likes: 50</a>
<a class="misc">Comments: 10</a>
<a class="misc">Author: Lorem</a>
</div>
</section>