How to move additional images to the right of main product image

[mali]

The box #productAdditionalImages seem to have embbed "style width"

In module additional_images.php, look for the line
'style="width:' . $col_width . '%;"' and then empty it to '' (remove "style=width...")

In the stylesheet, make sure you set #productMainImage to float left. So that #productAdditionalImages can go right. Don't forget to set "clear:both" for each additional image boxes.

This work for me.

[davale]

I get the feeling that this is exactly what I'm looking for. But where does this "clear:both" for each additional image boxes go?

[mali]

I think this should fix your problem.
#productAdditionalImages .additionalImages {clear:both;}

[davale]

I'm using ZC1.3.0.2 and can't find a '#productAdditionalImages .additionalImages' defined in the CSS stylesheets. There is a .additionalImages in the stylesheet_new.css but it's grouped with a number of other styles.

Do I create a new entry for #productAdditionalImages .additionalImages and remove .additionalImages from the group within the stylesheet_new or am I looking in the wrong place?

[mali]

I think .additionalImages inside the group does nothing apart from alining text to 'center', you shouldn't worry about it. just create new style for it.

Here is my style :

#productMainImage {margin:5px 0; padding:0; width:70%;float:left;}
#productAdditionalImages {margin:0; padding:5px 0; width:120px; }
#productAdditionalImages .additionalImages {clear:both;}
#productAdditionalImages a {text-decoration:none;}

[davale]

Almost there. But the clearBoth tag also makes the first additional image wrap to the next line (under the main image again).

When the clearBoth is removed three images (main mage and two additional images) show on the same line. That's great but now the I still have to force the second additional image to wrap underneath the first additional image.

This is what is defined in the CSS right now:

#productMainImage {float:left;}

#productAdditionalImages .additionalImages {clear:both;}

[kobra]

There is more than one way to approach this issue and you began this thread by referencing php files.... and in the tpl_product_info_display.php file there is this code:

<!--bof Additional Product Images -->
<?php
/**
 * display the products additional images
 */
  require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
<!--eof Additional Product Images -->

and it is placed after many things that display before it. Moving it up after the main image entry was what I was leading to. and there are a few clear both statements in this file that call for a new line. You will have to insure that the additional images have space to be presented. Do this through sizing of your site and images no matter if you do this by code file or through css.

As you seem close now you might continue with what you are doing or you might also look at the file??