HTML/CSS Table Cell align just a button at bottom; - html

Question

I do have issues with the positioning of my elements within a table-cell.
I do have a headline, an image and a button within my table cell. The images of the table cell are different in height, so I do want the button to be at the bottom.
What i want is in the below:
!Final Table-Cell Layout1
At the moment the buttons/Link text is right after the images...
.greyCompareTable {
padding: 20px 0px 20px 0px;
background-color: #f5f5f5;
margin-left: -20px;
margin-right: -20px;
display: table;
width: 100%;
border-spacing: 20px;
border-collapse: separate;
table-layout: fixed;
}
.greyCompareRow {
display:table-row;
background-color:green;
}
.greyCompareCell {
display:table-cell;
background-color: #fff;
border: 1px;
border-style: solid;
border-radius: 2px;
border-color: #37b8eb;
position: relative;
}
<div class="greyCompareTable">
<div class="greyCompareRow">
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Kastein_Bosch_Bartoel">Headline</span>
</h3>
<p style="text-align: center;">
<img src="..." border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
</p>
<p style="text-align: center;">
Jetzt ansehen
<img class="aligncenter tie-appear" style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0">
</p>
</div>
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Bergland_Bartoel">Headline 2</span>
</h3>
<p style="text-align: center;">
<a href="..." target="_blank" rel="noopener">
<img src="..." border="0" class="tie-appear"></a>
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
This image is a little bit bigger
</p>
<p style="text-align: center;">
Jetzt ansehen
</p>
</div>
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Bergland_Bartoel">Headline 3</span>
</h3>
<p style="text-align: center;">
<a href="..." target="_blank" rel="noopener">
<img src="..." border="0" class="tie-appear"></a>
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
</p>
<p style="text-align: center;">
Jetzt ansehen
</p>
</div>
</div>
</div>

Answer 1

You can set position: absolute; and bottom: 0; on your button but remember to set the parent element to position:relative in order to use absolute positioning and add a min-height: 300px; to the cell for smaller images.

Answer 2

Here's the full code aligning the hyperlink at the bottom and center. position: absolute will shift it out of it's position and bottom: 0; will pull the element to bottom, but that's not enough since other elements are not positioned well. Adding width: 100%; + margin:0 auto; will horizontally align link.
At last you will have following:
.shortc-button {
bottom: 0;
left: 0;
width: 100%;
margin:0 auto ;
position: absolute;
}
.greyCompareTable {
padding: 20px 0px 20px 0px;
background-color: #f5f5f5;
margin-left: -20px;
margin-right: -20px;
display: table;
width: 100%;
border-spacing: 20px;
border-collapse: separate;
table-layout: fixed;
}
.greyCompareRow {
display:table-row;
background-color:green;
}
.greyCompareCell {
display:table-cell;
background-color: #fff;
border: 1px;
border-style: solid;
border-radius: 2px;
border-color: #37b8eb;
position: relative;
}
.shortc-button {
bottom: 0;
left: 0;
width: 100%;
margin:0 auto ;
position: absolute;
}
<div class="greyCompareTable">
<div class="greyCompareRow">
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Kastein_Bosch_Bartoel">Headline</span>
</h3>
<p style="text-align: center;">
<img src="..." border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
</p>
<p style="text-align: center;">
Jetzt ansehen
<img class="aligncenter tie-appear" style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0">
</p>
</div>
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Bergland_Bartoel">Headline 2</span>
</h3>
<p style="text-align: center;">
<a href="..." target="_blank" rel="noopener">
<img src="..." border="0" class="tie-appear"></a>
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
This image is a little bit bigger
</p>
<p style="text-align: center;">
Jetzt ansehen
</p>
</div>
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Bergland_Bartoel">Headline 3</span>
</h3>
<p style="text-align: center;">
<a href="..." target="_blank" rel="noopener">
<img src="..." border="0" class="tie-appear"></a>
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
</p>
<p style="text-align: center;">
Jetzt ansehen
</p>
</div>
</div>
</div>