Question

Following code:

<div id="test">
  <table>
    <tbody>
      <tr>
        <td>
          <img src="img1.jpg" />
          <p>Bla bla bla</p>
          <p><a href="#"><img src="img2.jpg"></a></p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

and CSS:

#test td {
    width: 450px;
    height: 220px;
    vertical-align: top;
    border-bottom: 1px solid #000;
    border-right: 50px solid #fff;
}

#test td p {
    margin: 0 0 10px 0;
    width: 290px;
}

#test img {
    padding: 20px 5px 5px 5px;
    float:left;
}

How can I align the second image with the link to the bottom of the cell? I was googling a lot but none of the solutions work for me…

Answer 1

Give the container (td) position: relative and the image, or more specifically the <p> which contains the image, position: absolute; bottom: 0;. See it in action here.