Using position:absolute while keeping it inside the document flow

Question

It's a screenshot from a page currently I'm building. I'm trying to make sure the green button is always on the bottom of the container. Here is a piece of the code:

HTML

<div class="list-product-pat">
  <article>

   <!-- title, image, spec ... -->

   <div class="pricing-pat">

     <!-- the button goes here -->

   </div>
  </article>
</div>

CSS

 .list-product-pat article {
    position: relative;
    min-height: 260px;
 }

 .list-product-pat .pricing-pat {
    position: absolute;
    bottom: 0;
    width: 100%;
 }

So far there is no problem... until the product spec gets too long and it breaks into the green button.

I want to maintain the green button in the most bottom position, but in the same time I also want the height to extend if the product title/product spec gets too long.

In the ideal world, it should be something like this:

So my idea is to maintain the absolute positioning while still keeping it inside the document flow (so the product spec knows the green button is there and doesn't break through it).

I need it only to extend if the spec height gets too long. In other words, if the spec is in normal height, it wouldn't extent. I'd like to avoid a weird gap between the spec and the green button.

Is there any idea how to do it?

Here is a fiddle to see how I did it: http://jsfiddle.net/xaliber/xrb5U/

Answer 1

Adding position:absolute takes it out of the document flow, there's no way to keep it in it. But you can add padding-bottom equivalent to height of the button to the article container instead, which will prevent long text overrunning the button.

.list-product-pat article {
    position: relative;
    min-height: 260px;
    padding-bottom:80px;
    -moz-box-sizing:border-box;
    box-sizing:border-box; 
}

http://jsfiddle.net/xrb5U/3/

A separate issue is that two containers with different amount of texts will be different sizes (if one is larger than the min-height set). There's no easy fix for this in CSS positioning, you have to resort to Javascript, Flexbox or display:table-cell to keep the height of all them the same but each of them has their own issues too.