CODEWITHSUNDEEP
htmlcsstwitter-bootstrapformat
Mave
Mave

Reputation: 103

Position an HTML element right under another as opposed to positioned to the right or left

I have the following div styled and ready: my styled div

everything is working according to plan EXCEPT the "like" button, which I have as a div with the current css (to ease in seeing the border, I have also added a green border for debugging):

.article-likes {
 margin-right: 16px;
 float: bottom;
 bottom: 8px;
 left: 5px;
 border: 3px solid #73AD21;
}

and this is the html for the entire div.

<article class="media content-section">
<img class="rounded-circle article-img" src="/static/profile_pics/b1775e70284ad2de-1.png">
<!--- THE ELEMENT I AM TRYING TO MOVE IS DIRECTLY BELOW THIS LINE::::: --->
<div class="article-likes"><a class="btn btn-success btn-xs" href="">like</a></div>
  <div class="media-body">
    <div class="article-metadata">
      <a class="mr-2" href="/user/1">1</a>
      <small class="text-muted">(me)  July 18, 2020 - 04:16 AM</small>
      <div style="float:right;" class="mr-2">
        <a type="button" class="btn btn-secondary btn-xs" href="/post/3">view</a>
      </div>
    </div>
    <h2><a class="article-title" href="/post/3">demo post</a></h2>
    
    <p class="article-content">demo post sorry</p>
    
  </div>
</article>

I am trying to get the like button positioned directly under (and slightly offset to the left) of the user image (profile picture). I have tried float:bottom; but this does not seem to stick the image to the bottom of the post. I have also tried adding margins but those end up messing the other elements in the article tag.

Here is an example of what I am trying to achieve (inside red rectangle is optimal placement): optimal element placement i am trying to achieve

Upvotes: 0

Views: 868

Answers (2)

Kiyubi
Kiyubi

Reputation: 57

Dude, I gotta say, your code is totally messed up. For God's sake, don't use such lengthy class names for such a simple code. And as I can see, you don't have basic knowledge about floating a div. Anyways, here is you answer. Just remove your css code and paste mine.

.article-likes {
 width: 100px;
 height: 50px;
 border: 1px solid green;
}

Upvotes: 0

Wail Hayaly
Wail Hayaly

Reputation: 1227

If you use bootstrap you can simply wrap your image and like button inside <div class="col"></div>

and Voila! you have a column of contents, very simple.

Upvotes: 1

Related Questions