card actions section always at the bottom of the card

user_4784262 0
Viewed 44

What approach should i use in order to have the actions section always at the bottom of the cards?

Please see CodePen for better understanding.

<div class="container">
<div class="card">
    <div class="title">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia incidunt pariatur dicta deserunt neque vel magnam molestiae, animi optio ipsam alias accusamus quam excepturi ducimus suscipit sint amet, omnis mollitia.
    </div>
    <div class="middle">Middle Content</div>
    <div class="actions">
        <div>check availability</div>
        <button>Add to Wish</button>
        <button>Add to Cart</button>
    </div>
</div>

<div class="card">
    <div class="title">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia incidunt pariatur dicta deserunt
    </div>
            <div class="middle">Middle Content</div>
    <div class="actions">
        <div>check availability</div>
        <button>Add to Wish</button>
        <button>Add to Cart</button>
    </div>
</div>
<div class="card">
    <div class="title">Lorem ipsum, dolor s
    </div>
            <div class="middle">Middle Content</div>
    <div class="actions">
        <div>check availability</div>
        <button>Add to Wish</button>
        <button>Add to Cart</button>
    </div>
</div>

.container {
    display: flex;
 }
.card {
    display: flex;
    flex-direction: column;
    width: 320px;
    border: 1px solid grey;
    align-items: center;
    margin: 20px;

.title{
    padding: 20px;
}
.middle{
    padding: 20px;
}
.actions{
    text-align: center;
}
css html
2 Answers

You could add margin-top: auto. That'll push the actions section down

.actions {
  margin-top: auto;
  text-align: center;
}
user_141701110

You can achieve this by having the container div having a position of relative and the item you wish to be at the bottom having an absolute position with the bottom set to 0px

e.g. In your CSS

...
.card {
    position: relative;
    ...
}
.actions {
    position: absolute;
    bottom: 0px
    ...
}

You may still have to do some tweaking to your .middle class but this should hopefully give you a decent start

user_102237710
Related