Is there a way to position the span element at the bottom of a table cell in HTML:
Here is the code snippet I'm working with:
<td>
<span class='cat-otsikko'>Product title</span>
<span class='cat-hinta'>Product price</span>
</td>
I am trying to always have the cat-hinta appear at the bottom of the td regardless of the length of the product title above it. How can I achieve this setup?
I want the product price to be consistently displayed at the bottom, independent of the length of the product title.
UPDATE:
An attempt using Fancy's code was unsuccessful. Here is my complete code (tuotteet is the table class):
.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;
}
Update 2
I found Jeaffrey's solution too complicated for me. Can someone provide guidance on how to incorporate user-provided 'mu is too short' code into the following 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)."'>Add to Cart</a></span>
</div>
</td>
\n";
if($i % $productsPerRow == $productsPerRow - 1) {
print"</tr>";
}
}
?>