How to Text-Wrap Shopping cart icon

Hi Everyone,

It's difficult to explain in words, so please have a quick look at:

http://dazzlingsoaps.com/index.php?main_page=product_info&cPath=88&products_id=217

As you may have noticed, there is a big vertical distance between facial scrub and facial cleanser dropdown list. That's because the 'add to cart' icon on the right. Is there a way to get rid of this space and pack all the dropdown lists together on the left of the cart icon? I tried the wrapping option of CSS, which works for text but not for the lists...

Thanks a lot in advance!
-MeMo (still learning :smartalec:)

Himm... I guess it's not possible then?

This is happening because there is a <br class="clearBoth" /> below every attribute, which forces it to move below any other floated element which might be on the same line.

You could edit the attribute-building file to eliminate this, though that might have other undesirable consequences.

Alternatively, you could edit tpl_product_info_display.php and put the add to cart block just inside the product attributes div (or add a new div that wraps them both) and style the outer div with
position: relative; and possibly width: 100%;
and the add to cart div with
position: absolute; top: 0em; right: 0em;
so that it hugs the top right corner of the attributes space and doesn't interfere with attribute positioning.

P.S. - I notice you have a reminder to make selections from the dropdowns. If you want to be sure they make selections, you can add another option value ("Select") to each option name, and add that as another attribute value, making it default and display only.

Dear Glenn,

Thank you so much for all the ideas! I will try them :)) The 'Add to Cart on top right position' is what I need.

-Memo