Question

How could I force span to be bottom of table td?

I have this code:

<td>
    <span class='cat-otsikko'>Product title</span>
    <span class='cat-hinta'>Product price</span>
</td>

And I would like to force cat-hinta to be always bottom of the td. How could I get this done?
I need it because I want product price to always be bottom of the table, so it does not depend of product title (it may be 1-3 lines long).

EDIT:

Fancy´s code did not work. Here is the whole code I have: (tuotteet is class of the table)

.tuotteet tr{
border:1px dashed gray;
}

.tuotteet td {
width:30%;
border-right:dashed 1px gray;
border-bottom:dashed 1px gray;
padding:5px 2px 5px 2px;
border-top:dashed 1px gray;
text-align:center;
position: absolute;
}


.cat-otsikko {
font-weight:bold;
font-size:101%;
}

.cat-hinta {
font-size:108%;
color:#ED1C24;
font-weight:bold;
display:block;
bottom:0px;
position: absolute;
bottom: 0;
}

Edit 2

I tried Jeaffrey´s code but it seemed too complex for me.
So, how I could embed the mu is too short user code in this script:

<table border="0" class="tuotteet">
<?php
$productsPerRow = 3;

for($i=0;$i<$count;$i++){
if($i % $productsPerRow == 0) { 
print"<tr>"; 
} 

$tuote = $prods[$i];
print"
<td>
    <span class='cat-otsikko'>".buildLink('prod', $tuote['id'])."</span>
    <div class='product-alaosa'>
        <span class='cat-hinta'>".price($tuote['hinta'])."</span>
        <span class='cat-kori'><a class='button green medium' href='".buildUrl("addtocart", $id)."'>Lisää ostoskoriin</a></span>
    </div>
</td>
 \n";

 if($i % $productsPerRow == $productsPerRow - 1) { 
 print"</tr>"; 
 } 

}

?>

Answer 1

The CSS vertical positioning model is, um, rather limited so you have to kludge around it.

You can’t use absolute positioning because that removes elements from the normal document flow and you’ll end up with overlapping elements unless you can specify how tall everything is.

One thing you can do is to split your single cell into two cells and then add rowspan="2" to the rest of the cells in that row:

<tr>
    <td class="top">
        <span class='cat-otsikko'>Product title</span>
    </td>
    <td rowspan="2">
        Short
    </td>
</tr>
<tr>
    <td class="bottom">
        <span class='cat-hinta'>Product price</span>
    </td>
</tr>

And then use vertical alignment on the two table cells:

td.top {
    vertical-align: top;
    border: 1px solid red;
}
td.bottom {
    vertical-align: bottom;
    border: 1px solid green;
}

And a demo: http://jsfiddle.net/ambiguous/Es6Tn/

This is ugly but it will work and non-trivial vertical alignment in CSS is pretty much always ugly unless you want to pixel-position everything.