What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Middle Div Align Bottom

benoitjc

New member
Hello Everyone,
I am sorry if this question was answered already.
I have not been able to find it or something similar ( Ill be honest I am new to HTML and I'm not sure i am even looking for the right terms._

- I am trying to align the content "Hors-D'eouvre et Entrées" which is above the button.
I was originally struggling with getting the button to be aligned to the bottom all the time. (This was fixed through a relative an absolute position combo.

Now i would like to be able to get the same behavior replicated on the "Hors-D'eouvre et Entrées" so that it is aligned at the bottom just above each button. (Ideally like the middle card)

The image below shows how the issue.
example.png

HTML Card Code:
<div class="container">
<div class="recipe-card">
<img class="recipe-img" src="img/recipes/01.jpg" alt="Coupes Au Pamplemousse">
<h1 class="recipe-name">Coupes Au Pamplemousse</h1>
<p class="recipe-type">Hors-D'eouvre et Entrées</p>
<button class="recipe-btn">Voir la recette <span>&rarr;</span></button>
</div>
<!--End Recipe-card-->
</div>
<!--end container-->

The CSS code for the sections:
/*Recipes Grid*/

.wrapper {
margin: 0 auto;
max-width: 1200px;
}

.wrapper-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
justify-content: center;
grid-gap: 2rem;
margin: 2rem;
}

.container {
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
text-align: center;
border-radius: 20px;
position: relative;
width: 300px;
transition: transform .3s;
height: 100%;
border: none;
overflow: hidden;
}

.container:hover {
transform: translateY(5px);
box-shadow: 2px 2px 26px 0px rgba(0,0,0,0.3);
}

.recipe-card {
background-color: #fedbe4;
}

.recipe-img {
width: 100%;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

.recipe-name {
font-size: 1.5rem;
padding: 1rem;
}

.recipe-type {
margin: 1rem 2rem;
font-size: .9rem;
font-style: italic;
padding-bottom: 2.75rem;
}

.recipe-btn {
width: 100%;
border: none;
font-size: 1rem;
font-weight: bold;
color: #FFFFFF;
background-color: #F62459;
padding: 1rem;
border-radius: 0 0 20px 20px;
position: absolute;
bottom: 0;
right: 0;
}
/*End Recipes Grid*/

Any help would be appreciated i have been struggling with this all day.

Thank you,
 
Back
Top