Horizontal Dropdown Attributes

Hi! I'm using v1.3.9h and I seem to have come a little unstuck with my attributes.

I have 4 dropdown attributes currently aligned vertically and I would like them to align horizontally to take up less space. Preferably 2 rows with 2 drop downs in each row.

I've tried searching and the closest I came was http://www.zen-cart.com/forum/showthread.php?t=75427&highlight=horizontal+drop+attributes

I have changed the coding as suggested from:

<div class="wrapperAttribsOptions">
<div class="optionName back"><?php echo $options_name[$i]; ?></div>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" /></div>
```to ```
<div class="wrapperAttribsOptions">
<div class="optionName"><?php echo $options_name[$i] . ' '; ?><?php echo ' ' . $options_menu[$i]; ?></div>

The only thing that changed was from a vertical dropdown aligned right, it is now aligned left.

I have also tried going through admin/catalog/option names manager and selecting rows to 4 with no luck either.

My site is :http://www.amabelle.elementfx.com/shop/index.php?main_page=product_info&cPath=69&products_id=198

Any help or ideas would be most appreciated!
Thank you :blush:

Flexible Attributes in Free Addons will let you customize the attributes layout.

Thanks gjh42! I've gotten one step closer but it seems to have a staggered effect?

/*attribute layout*/
.wrapperAttribsOptions label {font-size: 1.0em;}/*make "label" elements match other text*/
h3#attribsOptionsText {display: none;}/*hide the "Please Choose:" heading*/
h4.optionName {font-size: 1.0em;}
.wrapperAttribsOptions+br.clearBoth {display: none;}/*allow floated attributes to sit side by side if desired*/
#wAttrib-1 {clear: left; float: left;}#wAttrib-2 {clear: left;}/*this will sit beside #wAttrib-11*/
#wAttrib-3 {clear: left;float:left;}/*this will sit on a new line*/#wAttrib-20 {clear: left;}

the result is here http://www.amabelle.elementfx.com/shop/index.php?main_page=product_info&cPath=69&products_id=197

Am I missing something to make it align next to each other?

Nevermind - Success!! For anyone else who has the same problem I hope this helps for you too. A huge thanks to gjh42 for the mod. Once you get the hang of zen, it's amazing how much you can do!

/attribute layout/
.wrapperAttribsOptions label {font-size: 1.0em;}
h3#attribsOptionsText {display: none;}
h4.optionName {display:none} /this is because I didn't want the Option Names visible as headers but inside the drop down menu, to get this effect: 1. Insert value with the same name
2. Upload in Attribute Controller
3. Make it "Default Value" and "Display Only" in the Attributes Controller legend
4. Update sort order/
.wrapperAttribsOptions+br.clearBoth {display: none;}
#wAttrib-1 {clear: left; float: left;}
#wAttrib-2 {float: left;}
#wAttrib-3 {float: left;float:left;}
#wAttrib-20 {float: left;}
.attribsOptions {margin-right: 1.0em;}