Image and buttons alignment

[globalmemory]

Hello,

I want to align the additional image and the add to cart button horizontally so that they are on the same line but at opposite ends of each other . i.e image on left and add to cart button on right. I also want to move the ask a seller question tab to below the price. It can be seen at the following:

http://www.globalmemory.co.uk/index....roducts_id=486

Please can anyone help with this problem.

I am using zen cart 1.3.8 with many mods installed on a linux server.

[jwitt98]

I don't see an add to cart button. Do you have your store set up as a showcase in admin->configuration->store status. You will need to change the setting to normal store before the add to cart button becomes available.

[globalmemory]

yes it is set to showcase as i don't want customers to use the site yet, but the principle is the same. I want to align the contact us/add to cart button on the same line as the additional image. I hope you can help

[jwitt98]

Since there is a <br class="clearBoth"> between the two, the easiest way I think is to fake it by adding a negative top margin to your add to card button.

#productGeneral #cartAdd {
margin-top: -95px;
}

This should be fine as long as you will only have 1 or 2 additional images to display per product, but if you ever plan on having 3 or more additional images, they will likely overlap your add to cart button, because if I recall, the width of 100%:
<div class="additionalImages centeredContent back" style="width: 100%;">
is hard coded.
It could be done with 3 additional images, but would require some more involved code changes.

[globalmemory]

excellent! that's done the trick thanks! Now i just want to half the gap between the 'ask a question' link line and the top additional image and contact/add cart button line. Any ideas?

[jwitt98]

Is it possible to remove the line break <br/> before the "ask a question" link?

If not you can try:
#productAdditionalImages {
margin-bottom: -20px;
}

but that may not move it as far as you'd like because of the line break.

If you cannot remove the line break try:
#productQuestions br {
line-height: 0px;
}

or maybe a combination of the two.