How to fix one block inside another

Question

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

Fixed your height. – Mr. Perfectionist Feb 03 '21 at 10:00 — Mr. Perfectionist, Feb 03 '21 at 10:00

Aalexander · Accepted Answer · 2021-02-03T10:10:18.520

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>

How to fix one block inside another

1 Answers1