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

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 Layout 1

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;">
   <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;">
   <a href="..." target="_blank" class="shortc-button medium green ">Jetzt ansehen</a>
    <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;">
    <a href="" target="_blank" class="shortc-button medium green ">Jetzt ansehen</a>
   </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;">
    <a href="" target="_blank" class="shortc-button medium green ">Jetzt ansehen</a>
   </p>
  </div>
</div>
</div>

Possible duplicate of [Align element to bottom of HTML Table Cell](https://stackoverflow.com/questions/42579075/align-element-to-bottom-of-html-table-cell) — Saeed, Sep 03 '18 at 12:11
I've read the answer you mentioned @Saeed but it did not help me out unfortunately — Alexander, Sep 03 '18 at 12:18
Try using flex layout https://stackoverflow.com/questions/31000885/align-an-element-to-bottom-with-flexbox — Ruan Mendes, Sep 03 '18 at 12:22

score 0 · Answer 1 · answered Sep 03 '18 at 12:11

0

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.

answered Sep 03 '18 at 12:11

Bogdan T Stancu

404
5
6

this helps to align it at the bottom but doesn't align it at the center anymore – Alexander Sep 03 '18 at 12:17

score 0 · Answer 2 · answered Sep 03 '18 at 12:20

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;">
   <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;">
   <a href="..." target="_blank" class="shortc-button medium green ">Jetzt ansehen</a>
    <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;">
    <a href="" target="_blank" class="shortc-button medium green ">Jetzt ansehen</a>
   </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;">
    <a href="" target="_blank" class="shortc-button medium green ">Jetzt ansehen</a>
   </p>
  </div>
</div>
</div>

works almost, but the width should not be 100% because of a background attached and if i set the bottom to 10px, the button is over the image — Alexander, Sep 03 '18 at 12:36
Then, you will need to change HTML structure. Are you fine with changing HTML structure? If so, I will edit my answer with correct structure & design. — harisdev, Sep 03 '18 at 12:51

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

2 Answers2