CODEWITHSUNDEEP
htmlcss
Nightmare
Nightmare

Reputation: 53

Place a independent "a" tag at the bottom of a "td" tag

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".

Upvotes: 0

Views: 88

Answers (5)

Designon
Designon

Reputation: 183

this is an example how you could do it:

parrent : position:relative; child : position:absolute; display:block; bottom:0;

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

 a{
 display:block;
 bottom:0;
 position:absolute;
}

http://jsfiddle.net/BqxuM/4/

Upvotes: 0

Paul Fleming
Paul Fleming

Reputation: 24526

Does it have to be in the same td?

How about this:

<table>
    <tr>
        <td>
            <div>big<br /> div</div>
        </td>
        <td>
            <div>small div</div>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <a href="#">link here</a>
        </td>
    </tr>
</table>

Upvotes: 1

Mihai Matei
Mihai Matei

Reputation: 24276

css

.my-bottom-link-parent {
  position:relative;
  /* padding-bottom: the height of the a element */
}

.my-bottom-link-parent a {
  position:absolute;
  bottom:0;
}

html

<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 class="my-bottom-link-parent">
      <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>

Upvotes: 1

silviomoreto
silviomoreto

Reputation: 5897

Use position relative:

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

td a {
  position: absolute;
  bottom: 0px;
}

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

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;
}

Upvotes: 2

Related Questions