114

I have the following code:

<td style="position: relative; min-height: 60px; vertical-align: top;">
    Contents of table cell, variable height, could be more than 60px;

    <div style="position: absolute; bottom: 0px;">
        Notice
    </div>
</td>

This does not work at all. For some reason, the position:relative command isn't being read on the TD and the notice DIV is being placed outside of the content container at the bottom of my page. I have tried to put all the contents of the TD into a DIV such as:

<td>
    <div style="position: relative; min-height: 60px; vertical-align: top;">
        Contents of table cell, variable height, could be more than 60px;

        <div style="position: absolute; bottom: 0px;">
            Notice
        </div>
    </div>
</td>

However, this creates a new problem. Since the height of the contents of the table cell is variable, the notice DIV isn't always at the bottom of the cell. If a table cell stretches beyond the 60px marker, but none of the other cells do, then in the other cells, the notice DIV is at 60px down, instead of at the bottom.

3
  • Is there a reason for using the table? I am assuming the rest of the table contents are going to shift the contents of this cell. If the table is necessary you can use two rows top with valign=top and bottom with valign=bottom
    – Wayne
    Dec 30, 2010 at 17:23
  • If you are using tables for purposes of layout, I would advise against that. Using tables to show data is fine, but they are not best for layout.
    – Kyle
    Dec 30, 2010 at 17:26
  • 5
    Its for a calendar... so a table grid is essential: 8wayrun.com/events/monthly/1.2011 Dec 30, 2010 at 17:39

5 Answers 5

198

This is because according to CSS 2.1, the effect of position: relative on table elements is undefined. Illustrative of this, position: relative has the desired effect on Chrome 13, but not on Firefox 4. Your solution here is to add a div around your content and put the position: relative on that div instead of the td. The following illustrates the results you get with the position: relative (1) on a div good), (2) on a td(no good), and finally (3) on a div inside a td (good again).

On Firefox 4

<table>
  <tr>
    <td>
      <div style="position:relative;">
        <span style="position:absolute; left:150px;">
          Absolute span
        </span>
        Relative div
      </div>
    </td>
  </tr>
</table>

7
  • 29
    The div height won't be 100% , so relative positioning to bottom: 0 has no effect.
    – Softlion
    Oct 31, 2011 at 6:13
  • 1
    Note that the "Absolute span" in this example will not affect the td height which basically makes the use of table useless.
    – Dror
    Mar 20, 2013 at 5:20
  • @Softlion: How about wrapping the entire content of the td inside a div, set to width: 100% and height: 100%, apply whatever padding from the td to the div, and set it to relative? The idea is to create a thin containing-layer just above the td, that acts like the td itself, but it's a div. It worked for me.
    – CamilB
    Sep 12, 2013 at 8:33
  • 1
    The link for HTML source is dead. Could you update/refresh it? Sep 9, 2018 at 17:53
  • 2
    For those who find this answer in 2019 or later: while CSS2.1 really did say that the effect of position:relative on internal table parts was undefined, it meant behavior of table parts themselves (for example, it was unclear how should the borders of the td behave if it is shifted via position:relative in case of border-collapse:collapse). It didn't exclude them from possible containing blocks of the absolutely positioned descendants. So the behavior of Firefox turned out to be just a bug, which was fixed in 2014. Jan 30, 2019 at 20:12
6

This trick also suitable, but in this case align properties (middle, bottom etc.) won't be working.

<td style="display: block; position: relative;">
</td>
2

Contents of table cell, variable height, could be more than 60px;

<div style="position: absolute; bottom: 0px;">
    Notice
</div>

0

With regards to your second attempt, did you try using vertical align ? Either

<td valign="bottom">

or with css

vertical-align:bottom
1
  • That wouldn't work... if I did that, then the contents of the table cell would be spaced 60px from the bottom; instead of at the top. Dec 30, 2010 at 18:06
-2

also works if you do a "display: block;" on the td, destroying the td identity, but works!

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.