position a at the bottom of a table cell

Question

I am trying to get a <span> to sit at the bottom of a fixed-height <td>, however it does not seem to be working.

I am developing in Firefox using Firebug and this is my markup and CSS.

I have read other posts stating that the td height needs to be fixed, well I have done that, however I am still having the same problem. How can I position the span at the bottom of the td?

<td class="details_amount">
  <span class="item_total_price">
    £<span id="amount_99201100099">49</span>
  </span>
  <br>
  <span class="person_price">£5</span>
</td>

td {
    height: 55px;
    padding-top: 1.8em;
    vertical-align: top;
}

.item_total_price {
    height: 100%;
}

.person_price {
    bottom: 0;
    position: relative;
}

How it looks in Firefox

Put `position:relative` to `td` and `position:absolute;bottom:0;` to `.person_price `. — Vucko, Nov 22 '13 at 18:00
@Vucko Thanks, I tried that. But it doesn't work - i'm clearly missing something obvious but not sure what... — crmpicco, Nov 25 '13 at 11:38
@Vucko Oh. Did you create that Fiddle in Chrome? Check out my screenshot from Firefox - http://i.stack.imgur.com/bzvs7.png - it sinks it to the bottom of the page. I have looked at your Fiddle on Chrome and it works as expected though. Why would FF exhibit this behaviour? — crmpicco, Nov 25 '13 at 11:46
@Vucko I Think i've found the solution - http://stackoverflow.com/questions/7256004/firefox-issue-with-displayabsolute-in-a-table-cell i.e. `display: block` on the `td`. — crmpicco, Nov 25 '13 at 11:49
Yes, it seems that FF has problems - [reference](http://stackoverflow.com/questions/11021308/css-positioning-absolute-within-table-cells-not-working-in-firefox). — Vucko, Nov 25 '13 at 11:49
Use `display:inline-block` if you have more then one `td` and that will suit. :) — Vucko, Nov 25 '13 at 11:50

score 9 · Accepted Answer · answered Nov 22 '13 at 18:00

9

You need position:absolute not position: relative for .person_price:

.person_price {
   position: absolute;
   bottom:0;
   left:0;
}

And also make his parent relative:

td {
  position:relative;
}

answered Nov 22 '13 at 18:00

DaniP

37,813
8
65
74

Hmmm...I tried this initally before I posted, but it wasn't working for me. It positions it at the bottom of the page and that is _with_ the relative positioning attached to the `td`. – crmpicco Nov 25 '13 at 11:36
Thanks for this, it does indeed work - it just needed a `display: block` on the `td` for support on Firefox. I've made an edit to the post. – crmpicco Nov 25 '13 at 11:51

score 0 · Answer 2 · answered Nov 22 '13 at 18:00

0

absolute, not relative.

.person_price {
    bottom: 0;
    position: absolute;
}

answered Nov 22 '13 at 18:00

SpliFF

38,186
16
91
120

6

This alone would position it at the bottom of the page, not the table cell. – j08691 Nov 22 '13 at 18:02

position a at the bottom of a table cell

2 Answers2