Align button in bottom without use position:absolute

Question

I have this sample:

CODE HTML:

<div class="product-group">
  <div class="product-wrapper">
      <div class="product-img">
          <img src="http://s1.busteco.ro/cristi/rbb/media/catalog/product/cache/3/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg" >
      </div>
      <div class="product-details">
           <h3 class="product-name">
                        <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" title="&quot;Better Than a Tie&quot; Father’s Day Gift Bundle">
                            "Better Than a Tie" Father’s Day Gift Bundle                        </a>
                    </h3>
                    <div class="product-description">
                       <p class="availability">
                            Release date:    
                            07/26/2016                        </p>
                        <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" class="button view">View product</a>

                    </div>
      </div>

  </div>
  <div class="product-wrapper">
      <div class="product-img">
          <img src="http://s1.busteco.ro/cristi/rbb/media/catalog/product/cache/3/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg" >
      </div>
      <div class="product-details">
           <h3 class="product-name">
                        <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" title="&quot;Better Than a Tie&quot; Father’s Day Gift Bundle">
                            "Better Than a Tie" Father’s Day Gift <br> Bundle"Better Than a Tie" Father’s Day  <br>  Gift Bundle "Better Than a Tie" <br>Father’s Day  Gift Bundle "Better Than a Tie" <br>                       </a>
                    </h3>
                    <div class="product-description">
                       <p class="availability">
                            Release date:    
                            07/26/2016                        </p>
                        <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" class="button view">View product</a>

                    </div>
      </div>

  </div>
</div>

CODE CSS:

.product-group{
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;    }

.product-wrapper{
    background:#f0f0f0;
    margin:35px 0;
    padding:8px 8px 10px 8px;
    }

    .product-name { margin:0; font-size:1em; font-weight:normal; }

    .product-wrapper .product-details p.availability {
    font-size: 12px;
    text-transform: capitalize;}

Plase view the button "view product",It must be in the bottom always, regardless of content.

At this time, the buttons are not aligned as they should. Their position is bottom: 0

How can you do this without using position: absolute?

Thanks in advance!

Why would you not use absolute positioning? Is fixed a proper solution if absolute is not? — Randy, Aug 01 '16 at 13:32
but why don;t you want to use posititon:absolute ? what's the hold up ? with your html structure...position:absolute it's the best and maybe only way to do it — Mihai T, Aug 01 '16 at 13:40
because I want to see if you can and otherwise I do know with absolute position — John Smith, Aug 01 '16 at 13:43
If it's simply for a brain exercize - yes, there are other ways: You could use flexboxes, javascript, or tables, for example. Absolute positioning is the way to go here, though, for both straight-forwardness and simplicity, as all other methods require a lot more effort. — TheThirdMan, Aug 01 '16 at 13:46
ok I want to see flexboxes method ... can you help me please? — John Smith, Aug 01 '16 at 13:48
The answer in the dupe has multiple flexbox methods for aligning an element to the bottom. — Michael Benjamin, Aug 01 '16 at 14:19

score 3 · Accepted Answer · answered Aug 01 '16 at 13:53

You should be able to achieve what you want using flex. This way, any wrappers on the same line will be the same height, and the product links will all line up. (Use full page link on snippet below)

.product-group {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.product-wrapper {
  background: #f0f0f0;
  margin: 35px 0;
  padding: 8px 8px 10px 8px;
  display: flex;             /* make each wrapper flex*/
  flex-direction: column;    /* stack inner elements into a column */
}
.product-name {
  margin: 0;
  font-size: 1em;
  font-weight: normal;
}
.product-wrapper .product-details p.availability {
  font-size: 12px;
  text-transform: capitalize;
  /* make this take the empty space and push the link to the bottom */
  flex-grow: 1;
}
.product-description,
.product-details {
  /* make these flex and stretch to fit their parents remaining space */
  flex-direction: column;
  display: flex;
  flex-grow: 1;
}

<div class="product-group">
  <div class="product-wrapper">
    <div class="product-img">
      <img src="http://s1.busteco.ro/cristi/rbb/media/catalog/product/cache/3/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg">
    </div>
    <div class="product-details">
      <h3 class="product-name"><a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" title="&quot;Better Than a Tie&quot; Father’s Day Gift Bundle">"Better Than a Tie" Father’s Day Gift Bundle</a></h3>
      <div class="product-description">
        <p class="availability">
          Release date: 07/26/2016</p>
        <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" class="button view">View product</a>
      </div>
    </div>
  </div>
  <div class="product-wrapper">
    <div class="product-img">
      <img src="http://s1.busteco.ro/cristi/rbb/media/catalog/product/cache/3/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/images/catalog/product/placeholder/small_image.jpg">
    </div>
    <div class="product-details">
      <h3 class="product-name"><a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" title="&quot;Better Than a Tie&quot; Father’s Day Gift Bundle">"Better Than a Tie" Father’s Day Gift <br> Bundle"Better Than a Tie" Father’s Day  <br>  Gift Bundle "Better Than a Tie" <br>Father’s Day  Gift Bundle "Better Than a Tie" <br> </a></h3>
      <div class="product-description">
        <p class="availability">
          Release date: 07/26/2016</p>
        <a href="http://s1.busteco.ro/cristi/rbb/b2b/better-than-a-tie-bundle.html" class="button view">View product</a>

      </div>
    </div>

  </div>
</div>

Align button in bottom without use position:absolute

1 Answers1