Product Description Page Layout Issues

[gjh42]

You have a <br class="clearBoth" /> after the additional images, and this is keeping all following elements below the images. Add to your stylesheet

#productAdditionalImages .clearBoth {display: none;}

The best solution to your alignment issues is probably to have the #productDescriptionWrapper mentioned in the stylesheet enclose all of the elements after the images.

[gjh42]

If you want the additional images at the right below the description etc., put their code block after those elements and not inside the productImages section.

[jesicam]

Thank you so much!! That helped by leaps and bounds, I really appreciate it.

Forgive me if this is a totally dumb question, but how do I enclose the other elements in the productDescription wrapper? Would I do that by adding <div id="productDescription"> to those in the tpl_product_info_display ?

[gjh42]

No, that would be wrong for two reasons. They would not be the same div, regardless of name, and id's are supposed to be unique, not appearing more than once on a page. #productDescription is properly only the description content.

You can make a new <div id="productDescriptionWrapper"> above the beginning of the description code block, with a </div> to close it below the last of the elements you want to enclose.

Then you can change the styling of #productDescriptionWrapper which is already in your stylesheet.

[jesicam]

Thank you so much!! That was a great fix and thank you for explaining the reasoning behind it. Zencart is my first leap into css & php so I'm kind of stabbing in the dark and learning as I go along.

The only element that still isn't cooperating is those pesky additional images. The css works on everything but those... they're still hanging out by themselves on the far right and too much spacing between them. They are within the div tags of the #productDescriptionWrapper so I'm not sure what that's all about. I'm guessing I have some conflicting code somewhere else that's overriding it?

[gjh42]

You have a 22em left margin on #productAdditionalImages. Reduce or eliminate that and things will fall into place.