views:

36

answers:

1

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%" class="productListing-data" valign="top">
    <div class="prodimagebox"><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.

A: 

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%" class="productListing-data" valign="top">
  <div class="item_wrapper">
    <div class="item_description">
      <!-- the description -->
    </div>
    <div class="item_price">
      <!-- the price -->
    </div>
  </div>
</td>

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

jigfox
Unfortunately I've tried a few variations of this and it doesn't work on this page. The prices don't align to the bottom of the cell, they simply end up floating over the title of the product. I really need to rewrite the code to generate a row with the image and title, and then another row with the price.
Fireflight
I had a similar problem today, and I learned that you can set the position of a table-cell to relative. So I wrapped the entire content of the cell in another `div` with `position:relative`. Than it worked for me.
jigfox
Well, that's somewhat of an improvement. Now items that have the same number of rows in their titles are lining up. So all the prices for titles with 2 rows are aligned, and titles with 3 rows are aligned with each other. However 2 and 3 row titles don't have aligned prices as the div is only as tall as it's content. I know I could us some js to find the tallest containing div and set all their heights to the same, but I'd rather avoid that if possible.
Fireflight
I've ended up going the jquery route. SLaks example here is what did the trick. http://stackoverflow.com/questions/2313140/find-out-divs-height-and-setting-div-height. Combined with Jens modifications and I've got my aligned text!
Fireflight