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.

Jason Axelrod
  • 7,155
  • 10
  • 50
  • 78
  • 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 '10 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 '10 at 17:26
  • 5
    Its for a calendar... so a table grid is essential: http://www.8wayrun.com/events/monthly/1.2011/ – Jason Axelrod Dec 30 '10 at 17:39

5 Answers5

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>
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
avernet
  • 30,895
  • 44
  • 126
  • 163
  • 29
    The div height won't be 100% , so relative positioning to bottom: 0 has no effect. – Softlion Oct 31 '11 at 06: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 '13 at 05: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 '13 at 08:33
  • Thanks for the great visualization. It's a simple and straightforward solution to put a relative `div` inside the `td`. It got rid of my placement quirks. – Erick Robertson Mar 13 '14 at 19:59
  • @CamilB Unfortunately, height 100% only works in IE if the td has a fixed height, which is the very reason I'm using absolute positioning to begin with (top 0, bottom 0). – Drazen Bjelovuk Jun 04 '17 at 23:33
  • 1
    The link for HTML source is dead. Could you update/refresh it? – Peter VARGA Sep 09 '18 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](https://www.w3.org/TR/CSS21/visudet.html#containing-block-details) of the absolutely positioned descendants. So the behavior of Firefox turned out to be just a bug, which was fixed in 2014. – Ilya Streltsyn Jan 30 '19 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>
Sergey Onishchenko
  • 6,943
  • 4
  • 44
  • 51
2

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

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

Xavier Deva Arul
  • 29
  • 1
  • 3
0

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

<td valign="bottom">

or with css

vertical-align:bottom
Kyle
  • 915
  • 8
  • 18
  • 34
  • 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. – Jason Axelrod Dec 30 '10 at 18:06
-2

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

daigorocub
  • 786
  • 8
  • 15