Vertically align product prices across multiple table cells-CodePudding

Sorry about the length here. I'm using oscommerce and have a page with all our product specials laid out in a 3 column table. I need to align the price of each product so that all the prices align across the screen with one another.

Visually, this is what I would like:

|-----------------------|
| Image | Image | Image |
| Title | Long  | Very, |
|       | Title | very, |
|       |       | long  |
|       |       | title |
|$19.99 |$29.99 |$139.00|
|-----------------------|

Currently, this is what the existing code generates:

|-----------------------|
| Image | Image | Image |
| Title | Long  | Very, |
| $19.99| Title | very, |
|       |$29.99 | long  |
|       |       | title |
|       |       |$139.00|
|-----------------------|

This is the code as it stands:

<table border="0" width="100%" cellspacing="0" cellpadding="2">
  <tr>
<?php
$column = 0;
$specials_query = tep_db_query($specials_split->sql_query);
while ($specials = tep_db_fetch_array($specials_query)) {
  $column   ;
  echo '<td align="center" width="33%"  valign="top">
    <div ><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 
    'products_id=' . $specials['products_id']) . '">' . tep_image(DIR_WS_IMAGES . 
    $specials['products_image'], $specials['products_name'], SMALL_IMAGE_WIDTH, 
    SMALL_IMAGE_HEIGHT) . '</a></div><br><a href="' . 
    tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $specials['products_id']) 
    . '">' . $specials['products_name'] . '</a><br>' 
    . $currencies->display_price($specials['specials_new_products_price'],
    tep_get_tax_rate($specials['products_tax_class_id'])) . '</td>' . "\n";

  if ((($column / 3) == floor($column / 3))) {
?>
    </tr>
      <tr>
        <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
      </tr>
      <tr>
<?php
  }
}
?>
  </tr>
</table>

I was trying to write some code that writes out the image and title, then takes us back 3 steps in the array. Next a new row, then three new columns containing the prices for the products above, a separator, and then continue on from there.

This way the prices would all be vertically aligned with one another, no matter the size of the title. I was heading down the pass of multiple nested loops and still getting no closer to my final result.

Help would be greatly appreciated.

CodePudding user response：

you should put the description and the price into two different divs:

<style>
  td.productListing-data div.item_wrapper {
    position: relative;
  }
  td.productListing-data div.item_wrapper div.item_description {
    margin-bottom: 15px;
  }
  td.productListing-data div.item_wrapper div.item_price {
    position: absolute;
    bottom: 0;
    height: 15px;
  }
</style>

<td align="center" width="33%"  valign="top">
  <div >
    <div >
      <!-- the description -->
    </div>
    <div >
      <!-- the price -->
    </div>
  </div>
</td>

I have just created an example, all you need to do is to work it into your table creation.