Question

Hey guys I have the following layout:

<table>
  <tr>
    <td>
      <div>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
      </div>
    </td>
    <td>
      <div>
        I´m smaller than the other<br>
        I´m smaller than the other
      </div>
      <a href="">I should be at the bottom of my parent td</a>
    </td>
  </tr>
</table>

http://jsfiddle.net/BqxuM/

Now I want to place the a-tag in the second td-tag at the bottom of the td-tag!
I tried many differnt things to accomplish this but with no success.

So does someone have an answer for me to get this to work?

PS: I would be really nice if this could be done without js/jquery “hacks”.

Answer 1

If this is the only structure you would be using than use position: relative; for the <table> and position: absolute; for <a>

Demo

CSS

table {
  border: solid 1px black;
  position: relative;
}

td {
  padding: 5px;
  border: solid 1px black;
}

a {
  position: absolute; 
  bottom: 0;
}