Product Description Page Layout Issues

[jesicam]

I actually used one already... it was the closest I could find to what I wanted but this is as close as it got me. It was the product_info_display_justified.

[jesicam]

So I took a screenshot of how this is showing up in the firefox web developer view. When I hover over the additional images, the highlighted field is way wider than the image itself (as shown). I think if I can shrink this field that might help the additional images align correctly? Sorry, I'm trying to be as descriptive as possible... I've spent hours on this problem already and I can't figure it out to save my life.

[jesicam]

Okay so I got the space around the images smaller by adding:

#productAdditionalImages {
width: 23%;
}


This managed to get them in a horizontal row, and it somehow moved them from the left of the main image to below them. It's a start. However - the rest of the page (description, attributes, add to cart) didn't end up rising up to the right of the main image like I expected them to. Also, float: right isn't doing anything to help tidy them up, they're scattered all over the place!

I'm still not sure what I'm doing wrong. As stated previously, any help would be greatly appreciated.

Link to page: http://jesicamilton.com/shop/index.p...59f502926de4eb

[kobra]

OK
So now try adding this statement to your stylesheet.css file

#productAdditionalImages {
        width: 280px;
        margin: 0em 0em 0em 22em;
        }

[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.