CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Pablo
Pablo

Reputation: 113

Fixed position for button

I'm trying to make button fixed using margin-bottom but it's not working if there is longer title.

My example: photo

<div class="post-detail-container-div">
<br />
<div class="post-content-div">
<h3 class="post-title entry-title">
   <a href="vijest?id=<?php echo $p['link'];?>"><?php echo $p['naslov']; ?></a>
</h3>
<div class="spusti">
   <ul class="list-unstyled list-inline post-metadata">
      <li>
         <i class="far fa-calendar"></i> Mon, 06-09-2018&nbsp;&nbsp;| 
      </li>
      <li>
         <i class="far fa-comment"></i>&nbsp;
         <a href="#">Comments(10)</a>
      </li>
   </ul>
   <p class="post-excerpt"> <?php echo $p['uvodni_tekst'];?> </p>
   <hr>
   <div class="view_detail">
      <a href="vijest?id=<?php echo $p['link'];?>" class="blog-btn">Pročitaj više</a>
   </div>
</div>

If you check photo you can see that button's are not in same line because title is longer.

My CSS class view_detail:

.view_detail {
     text-align:  center;
     margin-bottom: 30px;
 }

I'm using bootstrap too, so every suggestion is welcome.

Upvotes: 0

Views: 183

Answers (1)

red
red

Reputation: 1619

The simplest way:

  • add position: relative; to the main card container
  • add position: absolute; bottom: 0; to the button container
  • to avoid the overlap of the button set the margin-bottom of the text part as the height of the button container

Upvotes: 1

Related Questions