Help on element placement within template CSS

[TechnoDiver]

Hello Freaks, I hope the week has treated you all well so far. I have an issue, it's frustrating, I hate CSS - it never does what I think it should. I'm working on a single post page with comments at the bottom. Even though a lot of the CSS is mine, it was originally from a template. I'm trying to properly position the 'like' and 'reply' icons within each comment element and it's just not going how I want it to.

Not only can't I get it positioned properly but I can't get it to maintain that position regardless of comment length (it changes position as the comment gets longer).

Here's the CSS and HTML ->

CSS:

/* COMMENT AREA */

.comment_area {
  border-bottom: 1px solid #d0d5d8;
  padding-bottom: 50px; 
}
  .comment_area .title {
    margin-bottom: 50px; 
  }
  .comment_area .comment-content .comment-author {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 51px;
    flex: 0 0 51px;
    min-width: 51px;
    margin-right: 45px;
    height: 51px;
    border-radius: 50%; 
  }
    .comment_area .comment-content .comment-author img {
      min-width: 51px;
      height: 51px;
      border-radius: 50%; 
    }
  .comment_area .comment-content .comment-meta {
    margin-bottom: 30px;
    /* width: 100%; */
   }
    .comment_area .comment-content .comment-meta .post-author {
      margin-bottom: 5px;
      display: block;
      font-size: 16px;
      color: #003b46; 
    }
    .comment_area .comment-content .comment-meta .post-date {
      font-size: 12px;
      text-transform: uppercase;
      margin-bottom: 0;
      color: #656565;
      display: block;
      margin-bottom: 20px; 
    }
    .comment_area .comment-content .comment-meta p {
      margin-bottom: 15px;
      font-size: 14px;
      line-height: 2;
      font-weight: 500;
      /* width: 100%; */
     }

    /* .comment_area .comment-content .comment-actions {
      width: 100%;
      border-top: 1px solid;
      border-color: #a8a8a8;
      display: block;
      z-index: 2;
      position: relative;
      top: 150px;
    } */

  /* .comment-actions .comment-like {
    position: relative;
    top: 150px;
}  */

  .comment_area .single_comment_area {
    margin-bottom: 10px; 
  }
    .comment_area .single_comment_area:last-of-type {
      margin-bottom: 0; 
    }
  .comment_area .single_comment_area {
    margin-left: 40px;
    margin-top: 30px; 
  }

  /* END COMMENT AREA */

HTML:

<div class='original'>
    <div class='comment-content d-flex col-lg-12'>

        <div class='comment-author author-thumbnail'>
            <img src='../usernet/img/{$data['profile_pic']}' alt='author'>
        </div>

        <div class='comment-meta'>
            <a href='#' class='post-author'>{$data['commenter']}</a>
            <a href='#' class='post-date'>{$data['date']}</a>
            <p>{$data['comment']}</p>
        </div>

        <div class='comment-actions'>
            <a href='#' class='comment-like'><span><i class='fa fa-thumbs-up'></i> Like</span></a>&nbsp;&nbsp;
            <a href='#' class='comment-reply'><span><i class='fa fa-reply' aria-hidden='true'></i> Reply</span></a>&nbsp;&nbsp;
        </div>
    </div>
</div>

Here's a SS example. (I've not put in the HTML for the reply as it's the same as the original at the moment). The icons aren't consistently in the same position and I don't want them on the top but in the bottom right corner. There's a block in my CSS code above that is commented out. That gets them on the bottom but not in a fixed position relative to their respective comment boxes. You'll also see that the responses are just echoing the comment right now, ignore it, I'm in the early stages of this part of the project.

I believe this is all that's needed to clarify my issue. I'm at the end of my temper with it and need some help. Thank you

[requinix]

You're way overthinking this.

Forget positioning. Let the element render where it would normally because that's where you want it. Then simply align its contents right.

https://jsfiddle.net/fk9n1pbz/

[TechnoDiver]

On 10/21/2021 at 2:23 PM, requinix said:

You're way overthinking this.

Forget positioning. Let the element render where it would normally because that's where you want it. Then simply align its contents right.

https://jsfiddle.net/fk9n1pbz/

OK, you were right, I was over thinking it and my disposition against CSS caused me to neglect to research d-flex better.

This is the amended CSS/HTML ->

<div class='original'>
  <div class='comment-content d-flex col-lg-12'>

      <div class='comment-author author-thumbnail'>
          <img src='../usernet/img/{$data['profile_pic']}' alt='author'>
      </div>

      <div class='comment-meta'>
          <a href='#' class='post-author'>{$data['commenter']}</a>
          <a href='#' class='post-date'>{$data['date']}</a>
          <p>{$data['comment']}</p>
      </div>
  </div>
  <div class='comment-actions'>
      <a href='#' class='comment-like'><span><i class='fa fa-thumbs-up'></i> Like</span></a>&nbsp;&nbsp;
      <a href='#' class='comment-like'><span><i class='fa fa-reply' aria-hidden='true'></i> Reply</span></a>&nbsp;&nbsp;
  </div>
 </div>

I had to take the comment actions out of the <div> with d-flex.

But even saying that, here's an example of why I have such an issue with CSS. Here's the relevant style ->

 .original .comment-actions {
      text-align: right;
      padding-bottom: 10px;
      margin-right: 20px;
    }

Why in the name of everything that's holy did 'margin-bottom' not work and I had to use 'padding-bottom' to get it up a little?? This is part rhetorical question and part real question. When I got it into place, pre-margins, I thought 'great!! finally. Now let's add some margins' my head almost went into the keyboard when margin-bottom did nothing. Why?? I can't understand it

[requinix]

Margins are more complicated than simply giving you spacing from the edge some nearby element. Like they'll merge and collapse with other margins. And margins can extend outside what you think the bounding box of the element is.

The comment-action's margin does not push it away from the bottom of the parent div because there was nothing to push against. That bottom edge isn't a hard edge.

Think of margins as a way of spacing from other unrelated elements while padding is for spacing from other related elements; use a margin with a div + div but use padding with a div > div.
Of course it's not actually that simple, but it's a start.

[TechnoDiver]

On 10/22/2021 at 9:43 PM, requinix said:

Think of margins as a way of spacing from other unrelated elements while padding is for spacing from other related elements; use a margin with a div + div but use padding with a div > div.

Thank you, That's a different way of thinking about it that I can see will add value in the future, I appreciate your response