Product Description Page Layout Issues

[kobra]

You will need to make a copy of tpl_product_info_display.php file for your template override in barebones template structure

Edit it and re-order the elements - - this file is fairly well segmented into blocks that begin with "bof" & end with "eof" and full blocks can be moved
That and some css for tweaking will net what you desire

[jesicam]

Thank you... I have been doing that but just editing the tpl_product_info_display within the default folders. I have figured out how to rearrange the blocks - but I cannot figure out how to style these in the css to make them look neat & tidy like my example. None of my edits work and I'm out of ideas.

Sorry but I'm a bit dense... as I mentioned before I'm just a clothing designer stumbling through this to add a shopping feature to my website. If anybody could show me some css examples I would REALLY REALLY appreciate it!

[jesicam]

Just to clarify, I'm having a problem moving my description, price, drop down box, add to cart, etc. next to my main product image (to the right). I looked at this with the firefox developer tool and it looks like my additional product images are pushing everything down to the bottom?

I don't care if the additional images end up next to or underneath the main image, or even underneath the description, etc. like my example page. I just need to get things looking neat & tidy. Float: right and text-align: center don't do the trick.

[gjh42]

There are product info page layout mods available in Free Addons. One of them may get you most of the way to what you want.

[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