Jump to content

repositioning elements relative to the element in which they reside


TechnoDiver

Recommended Posts

CSS in one of my nightmares, it is the one thing that causes me the most frustration. I have a question for those who are a bit more graceful with it than I am -

I have a comment area in a practice project, it looks like this ->

<div class="comment-content d-flex">
    
    <div class="comment-author">
        <img src="img.jpg" alt="author">
    </div>
    
    <div class="comment-meta">
        <a href="#" class="post-author">Commenter Name</a>
        <a href="#" class="post-date">Comment date</a>
        <p>Donec turpis erat, scelerisque id euismod sit amet, fermentum vel dolor. Nulla facilisi. Sed pellen tesque lectus et</p>
    </div>

<!-- I added this area myself
	<div class='d-flex align-items-center'>
        <a href='#' class='comment-like'><span><i class="fa fa-thumbs-up"></i> like</span></a>&nbsp;&nbsp;
        <a href='#' class='comment-respond'><span><i class="fa fa-comment"></i> respond</span></a>
    </div>
-->
    
</div>

in the area that I commented that I added myself .comment-like and .comment-respond are not yet defined. At the moment it flows to the right of the comment area and I want them below it. Easy enough to do with positioning except that I need it to be positioned relative to the content of the comment that it belongs to. This whole block will eventually be echoed from a PHP class but I like to get the styling and html correct on the page it will display on first (probably like most people).

Can I get some advice on the best way to resolve this issue from you folks please. TIA

Link to comment
Share on other sites

If you want the new DIV to be below the .comment-meta then (1) give that new element a class like how the others have classes, then (2) since you're using flex, apparently, tell CSS that you want the .comment-meta to take up the whole line it's on and the buttons will be forced onto the next one.

Link to comment
Share on other sites

1 hour ago, requinix said:

tell CSS that you want the .comment-meta to take up the whole line it's on and the buttons will be forced onto the next one.

I tried this with bootstrap cols actually and didn't work. It's from a template and I wasn't familiar with flex. I'm reading about it now, thanks

Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.