1

I have 3 components in a row and I want their buttons be aligned at the bottom of containers. However each container has different text so it's height is not fixed and we don't want to strict the height.

How can I achieve alignment of the containers only by css and compatible with IE9 as well?

    .container-of-3 > div{
      float: left;
      width: 33.33333333333%;

      > img{
        margin-left: calc((100% - 90px)/2);
      }

    }

    .button-link{
      background-color: #69be28;
      color: #fff;
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
      padding-left: 1rem;
      padding-right: 1rem;
      text-decoration:  none;
      border-radius: 5px;
    }
<div class="container-of-3">
      <div>
        <img src="http://placehold.it/90x90" class="" alt="">

        <h5 class="">Hybrid Cloud</h5>

        <p class="">Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut.
      Tibique percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. Nusquam oportere
      vituperata id cum, adipisci persecuti an pro. Eu vim facer graecis, id nec dicta integre interpretaris</p>

        <div class="text-align__center">
          <a href="http://www.hotmail.com" class="button-link" target="_blank">
            <i class="fa fa-chevron-right"></i>
        Read More</a>
        </div>

      </div>

      <div>


    <img src="http://placehold.it/90x90" class="" alt="">

    <h5>Hybrid Cloud</h5>

    <p>Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique
      percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. </p>

        <div class="text-align__center">
          <a href="http://www.hotmail.com" class="button-link" target="_blank">
            <i class="fa fa-chevron-right"></i>
        Read More</a>
            </div>

      </div>

      <div>

    <img src="http://placehold.it/90x90" class="" alt="">

    <h5>Hybrid Cloud</h5>

    <p>Lorem ipsum dolor sit amet</p>

    <div class="text-align__center">
      <a href="http://www.hotmail.com" class="button-link" target="_blank">
        <i class="fa fa-chevron-right"></i>
        Read More</a>
    </div>

      </div>

    </div>

http://codepen.io/neginbasiri/pen/mPYzKx

6
  • Buttons are already in bottom..what is your issue? May 18, 2016 at 5:54
  • If the user were on a smaller device and the containers wrapped, there would be a lot of extra spacing between the text and button. Is that a concern?
    – kizeloo
    May 18, 2016 at 6:00
  • Make the containers position relative and make the buttons absolute with bottom: 0
    – aifrim
    May 18, 2016 at 6:01
  • No I want all buttons be aligned at the bottom. If you have a look buttons of all containers are not aligned because of the amount of text is different May 18, 2016 at 6:02
  • @aifrim . I tried that, the buttons actually need to be -75px or they appear on top of the text.
    – kizeloo
    May 18, 2016 at 6:02

3 Answers 3

3

Same height is not necessary to make this done) Just set position relative on outermost parent and set position: absolute with only bottom: 0 for your button without specifying left and right.

.container-of-3 {
  position: relative;
  padding-bottom: 40px;
  overflow: hidden;
}

.container-of-3 > div{
  float: left;
  width: 33.33333333333%;

  > img{
    margin-left: calc((100% - 90px)/2);
  }

}

.div-content {
    text-align: center;
}

.button-holder {
    width: 33.33333333333%;
    position: absolute;
    text-align: center;
    bottom: 0;
}

.button-link{
  background-color: #69be28;
  display: inline-block;
  vertical-align: top;
  color: #fff;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-decoration:  none;
  border-radius: 5px;
}
<div class="container-of-3">
  <div>
    <div class="div-content">
        <img src="http://placehold.it/90x90" class="" alt="">

        <h5 class="">Hybrid Cloud</h5>

        <p class="">Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut.
  Tibique percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. Nusquam oportere
  vituperata id cum, adipisci persecuti an pro. Eu vim facer graecis, id nec dicta integre interpretaris</p>
    </div>

    <div class="text-align__center button-holder">
            <a href="http://www.hotmail.com" class="button-link" target="_blank">
            <i class="fa fa-chevron-right"></i>
    Read More</a>
    </div>

  </div>

  <div>
      <div class="div-content">
          <img src="http://placehold.it/90x90" class="" alt="">
          <h5>Hybrid Cloud</h5>
          <p>Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique
  percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. </p>
      </div>

    <div class="text-align__center button-holder">
      <a href="http://www.hotmail.com" class="button-link" target="_blank">
        <i class="fa fa-chevron-right"></i>
    Read More</a>
    </div>
  </div>

  <div>
      <div class="div-content">
          <img src="http://placehold.it/90x90" class="" alt="">
          <h5>Hybrid Cloud</h5>
          <p>Lorem ipsum dolor sit amet</p>
      </div>

<div class="text-align__center button-holder">
  <a href="http://www.hotmail.com" class="button-link" target="_blank">
    <i class="fa fa-chevron-right"></i>
    Read More</a>
</div>

  </div>

</div>

1
  • Thanks Muhammad, your solution works perfectly. The only issue I have now is all the text and content should be aligned centered. Because button position is absolute and I can't set left and right. Do you know how can I achieve making the button horizontally aligned in the middle of each block? May 18, 2016 at 6:36
3

You can use display: table for the container and display: table-cell for the three columns, this way they are all the same height. Then fix the button to the bottom and you're done :)

.container-of-3 {
  display: table;
}
.container-of-3 > div{
  width: 33.33333333333%;
  display:table-cell;
  height: 100%;
  padding-bottom: 20px;
  position: relative;
}

check out this fiddle: https://jsfiddle.net/br6c5way/

2
  • @SteveHartley Until CSS Grids gets implemented, yep.
    – TylerH
    May 18, 2016 at 6:14
  • Yep, the question asked for IE9 support which rules out flex, etc. CSS display tables have had a lot of utility before the newer specs and shouldn't be mixed up with HTML tables. May 18, 2016 at 6:21
2

Floats will not really help you here since they don't match heights. You'll want to change the divs to a table table cell approach. Then position absolute the buttons so they are always aligned the same. Since Firefox 30 or so all browsers handle position relative on table cell elements. The positioning below aren't exact so you'll want to try out different amounts of padding and positioning that work for you.

.container-of-3 {
  display:table;
  table-layout: fixed;
  width:100%

  > div {
    display: table-cell;
    position: relative;
    vertical-align:top;
    padding-bottom:50px;

    > img{
      margin-left: calc((100% - 90px)/2);
    }
  }
}

.button-link{
  position: absolute;
  bottom: 10px;
  left: 0;
  background-color: #69be28;
  color: #fff;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-decoration:  none;
  border-radius: 5px;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.