changing product display layout - moving "blocks" etc issue

I have moved a couple of "blocks" around in the tpl_product_info_display file but the diaplay isn't lining up correctly.

I have put the "add to cart" box after the price block,
the "attributes" block below that,
and the "tell a friend" block below that.

When I view the product diplay though, the attributes are under the price block and the main image (split).

Any clues? Click here to see what I mean:
http://www.miraclebaby.co.nz/estore/index.php?main_page=product_info&cPath=21_23&products_id=39

(the site is a work in progress):huh:

If you want the attributes under the add to cart box, you can add this to your stylesheet:```
#productAttributes {
clear: right;
margin-left: 330px;
}

Thanks, I have been playing around with the css. The only one I can't figure out is the product description. I have the product image on the left, the add to cart, attributes, tell a friend on the right, and nothing in the centre.

The description is sitting below everything when I want it to shift up to the centre/top. I have tried this:

/.content,/ #productDescription, .shippingEstimatorWrapper {
/font-size: 1.2em;/
padding: 0.5em;
vertical-align: top;
}

:huh:

Okay, this is basically what I am attempting. You know the layout of the subcategory which lists all the products - thats the same layout I want for the product descriptions.

If anyone can point me to where the layout for the category page is, perhaps I can figure it out to change the product display to something similar because at the moment its all askew.

What am I doing wrong? (pulling my hair out!):cry:

I need the add to cart, attributes, and tell a friend to be in line together. This is the script for the latter two:

#productAttributes {
clear: centre;
margin: 0.5em;
padding: 0.5em;
}

#productTellFriendLink{
clear: right;
margin: 0.5em;
padding: 0.5em;
}

The add to cart button is on the left, but these other two won't line up and are falling below.

clear: centre; is incorrect CSS - you can only clear left, right or both.

These will get your add to cart and attributes lined up at the right:```
/Shopping Cart Display/
#cartAdd {
float: right;
text-align: center;
margin: 1em;
border: 1px solid #000000;
padding: 1em;
}
...

/Attributes/

...

#productAttributes {
float: right;
clear: right;
margin: 0.5em;
padding: 0.5em;
}

With your #mainWrapper at 80% of the window width, you don't have enough room to get the description between the image and add to cart in a 1024x768 monitor.

Thanks for your help but I realised that last point that you made too when I had another look. I have changed the css in an effort to get the add-to-cart, attributes, and tellFriend all in line with each other. Still my attributes split up and the tellFriend one drops below too. Here is an example if it would help to see whats going on. Its a bit stuffed. :blush:

Product page link -
click here