product info positioning issues

[jbezooyen]

So I have a quick question (might be really simple). I'm learning CSS as I go, and while I think I've got a pretty good handle on most things, I am having some problems with positioning elements on my product info pages.

First - I modified the product info template (tpl_product_info_display.php) to adjust the order in which the various page elements load (but that was easy and pretty straight-forward).

Here's a sample page (same issues for all of them of course): http://www.shiftfashion.ca/shop/inde...&products_id=3

The issue I'm having is that the "cartAdd" and "productAttributes" div's keep moving down the page (while my product description sits above them). This probably has something to do with the way I've floated the elements, but I'm not entirely sure where the problem comes up. Ideally I'm trying to have them display side by side just below the product name and price (then followed by the description) but they keep jumping down the page (just below the bottom edge of the main image but still on the right side of the page).

So what am I missing? I've tried toying with floating and positioning via the CSS, but I must be overlooking something. Any suggestions?

[jbezooyen]

(Hmm, I'm not sure how to edit my post either... I couldn't find the option)

What I was going to add: Maybe somebody could just explain to me why the cartadd and productAttributes div's are displayed after the product description (although if viewing the html, they're clearly outlined first).

I do already realize it's all about the css and positioning but I haven't a clue as to why things keep jumping around like they are, so assistance greatly appreciated. Thanks!

[kobra]

First get rid of these and see the result:

#productAdditionalImages {
	clear: left;
	float: left;
	width: 225px;
}

#productName {
	clear: right;
}

Then add these but insure that you do not have another for these(you do now)

#productAdditionalImages {
	float: right;
	width: 55%;
}

#productDescription {
clear: both;
}

#productPrices {
width: 40%;
float: left;
clear: both;
}

#productName {
	float: left;
        width: 40%;
        clear: both;
        }

I know not perfect but all I had time for and I think closer...

[jbezooyen]

Well I think it's a good start. However, that seems to put the alternate images to the right of the main, with the name, description etc below. That's unfortunately not quite the result that I'm looking for. I did notice, however, that the content below is closer to what I'm looking for. In fact, if I "display: none" the additional images, I'm getting even closer still (but then I don't have any additional images).

I'm going to have to keep experimenting. Thanks for the advice so far!

[jbezooyen]

Alright, so after some experimenting with the design of the page, I'm realizing all my issues are tied to the "clear" property. The clear property seems to affect all the subsequent elements, which means that as soon as I tell the additional images to "clear" the main, every other floating element clears it as well. (Even specifying "clear: none" doesn't seem to work since the "clearing" was already set earlier.)

So... any other suggestions about how I might place those images?