Alignment Problem

[TMHarris]

Please look at this page http://the-accessory.com/index.php?m...products_id=16. I am trying to align the product description to the right of the main photo. So far I have added a padding-left field to push the text over. Now I just need the picture to move up. Please point me in the right direction.

Also, I would like my first additional image to align to the left underneath the main photo. Any help will be greatly appreciated. Thanks.

[jcdk]

Maybe:

Your product description is set above your image in the product_info_display tpl file or that there is a <clearboth> beneath your product description.

or:

there is a floating issue


I will try to check it out tonight.

[lat9]

Well, all the <br class="clearBoth"/>'s on the page are definitely not helping. That statement essentially indicates that no content is going to 'float' up (either right or left) past that point.

I'd start by removing the ones after the productPrices, productDetailsList, and productDescription. Then your floats have a chance.

I also noticed that your CSS is specifying the width of the productImageWrapper to be 120px wide while it's actually 240px.

Good luck!

[TMHarris]

Still unable to change the layout with the description wrapping to the right of the main image, but I was able to move the coding for the description right underneath the price coding. This offered a little more hope. I deleted some of the <br class="clearBoth"/>'s but decided to put a few back in to keep the layout I closer to what I was looking for.

I was able to adjust the additional pictures by changing the columnar display template.

If anyone can figure out how to wrap the text to the right of the main photo, please fill me in or at least point me in the right direction. Thank you to those who have already made suggestions. Still figuring this out.

[TMHarris]

Ok. I think I figured it out! For anyone else who might have this problem, this is what I did.

In my tpl_product_info_display.php file I placed the code for the product description under the coding for the additional images. In the stylesheet I added a left margin of 12px to keep the text off the picture.

[TMHarris]

Correction: After adding more text the entire block dropped back underneath the additional photos. So I opened my stylesheet and added a spot for width in the coding for product description. This is what I have:

#productDescription {float: right;
                     margin: 0px 0px 0px 6px;
                     font-size: 1.2em; 
                     padding: 0em;
                     width: 50%; } 

[broadnax]

Hello,

I'm new to the forum, but am a pretty experienced programmer. However, I've been staring this in the face for a while and can't figure it out. I want my website to have a similar layout on the product page to the one discussed above, but I just can't figure it out.

What did you do to your stylesheet to get the image/product description to show that way?

Here is the existing site:

http://nylanoor.com/site/index.php?m...roducts_id=115

Any response will be helpful.

--Brent B.