Display product attributes in two columns (side by side)

[gjh42]

This question of displaying items in a two-column list has been widely discussed in forums and blogs, with a lot of creatively simple methods posted. It would not be hard to add a class to the even- or odd-numbered attributes, which could be used to generically put them in two columns unless there is individual styling to override that. It would also be optional and easily switched on or off, as the two-column layout would be created just with stylesheet rules.

[DivaVocals]

**deleted**

[DivaVocals]

This question of displaying items in a two-column list has been widely discussed in forums and blogs, with a lot of creatively simple methods posted. It would not be hard to add a class to the even- or odd-numbered attributes, which could be used to generically put them in two columns unless there is individual styling to override that. It would also be optional and easily switched on or off, as the two-column layout would be created just with stylesheet rules.

Now if only I knew HOW to do it.. Seriously, I might take a look at this code.. At the time I had it done I needed a quick down and dirty solution, and my friend churned this out in the span of two IMs for me.. I know he used tables 'cause that was easy to do.. To make it tableless I guess it's simply a matter of me wrapping the code that's between the two <td> tags around some new style IDs (one for left and one for right) and then adding the corresponding style attributes to the stylesheet.. This would make my old down and dirty fix a tableless solution.. I would probably use some variation of one of the CSS Play tableless layouts.. (I've used variations of these layouts to re-organize some of the items on the product detail pages before)

One thing Glenn.. can you be so kind as to help me solve the mystery as to why my code does not work (ignores) attributes where the sort order number is either "0" or "1"??? I've tried a bunch of things, and ultimately gave up figuring this out just to keep my hair and my sanity.. But I still sure am curious about WHY..

[gjh42]

I spent some time earlier analyzing and notating that code (only to have it all erased when I mistakenly did a search in that tab), and couldn't find anything that should have been affected by the sort order number entered in admin.

One thing that has occurred to me is that it should be possible to get a two-column layout from the stock file just by using CSS.

/*eliminate hard break between attributes*/
.wrapperAttribsOptions+br.clearBoth {display: none;}/*allow floated attributes to sit side by side if desired*/
.wrapperAttribsOptions {float: left; width: 48%;}/*float attributes and make them half the available width*/

This basic code should make the attributes sit two to a row. Some supplemental rules may well be needed to make the attribute group play well with its surroundings.

The attributes will all need to be set to the same height so there is no snagging in the float.

[DivaVocals]

I spent some time earlier analyzing and notating that code (only to have it all erased when I mistakenly did a search in that tab), and couldn't find anything that should have been affected by the sort order number entered in admin.

One thing that has occurred to me is that it should be possible to get a two-column layout from the stock file just by using CSS.

/*eliminate hard break between attributes*/
.wrapperAttribsOptions+br.clearBoth {display: none;}/*allow floated attributes to sit side by side if desired*/
.wrapperAttribsOptions {float: left; width: 48%;}/*float attributes and make them half the available width*/

This basic code should make the attributes sit two to a row. Some supplemental rules may well be needed to make the attribute group play well with its surroundings.

The attributes will all need to be set to the same height so there is no snagging in the float.

Thanks for the response.. Guess I'll be doing some experimenting some more with this.. I like the idea of a CSS solution.. And thank you for the correct wording that I could never seem to get out of my mouth... "make the attributes sit two to a row"

[cwhittaker]

I've seen a few posts here asking about this or something similar. I got some help from a few sources to get this working for me.. I thought I'd share my solution in case anyone else is looking for something similar. You need to set up the appropriate override for the tpl_modules_attributes.php file (includes/templates/YOUR_TEMPLATE/templates)

Product attributes by default appear in a vertical format based on the sort order for each attribute. For a few attributes, this is cool, but for more than a few attributes, it can make the product pages a little unwielding.. I needed to have attributes appear in two columns side by side. I wanted to keep this simple.. I figured that using the existing sort order features would allow me to use the admin controls to place the attributes where I wanted them to appear and the order they should appear in. Even numbered attributes appear in the left column, while odd numbered attributes appear on the right. (by number I mean the sort order number)

There is only one caveat.. I had a friend helping me, and I didn't want to bug him too much.. His orginal solution got me part way there, but didn't split the odd and even sort order numbers the way I wanted.. I figured out how to get his orginal solution to split the attributes between odd and even sort order numbers in two columns.. However, I couldn't figure our how to get attributes with sort order "1" to appear correctly.. (This attribute always appeared in the left column with the even numbered attributes) So I worked around this by having my attibute sort order start with "2" (so now I am skipping/not using "1" or "0" as a sort order), and it solves the problem.. Even sort order numbers appear on the left, and odd sort order numbers appear on the right. Oh I also have the form field appear below the label just to make the final layout a little neater looking.

Hope someone else finds this useful..

Display product attributes in two columns (display attributes side by side)

Just wanted to say a big THANK YOU for your contribution above I really needed this for my website and stumbled across your post. Needless to say, you are very kind to have posted this and I can assure you if and when I find an answer to something someone else might need I will return the favour. Cheers, my friend and all the best!

[cwhittaker]

Just wanted to say a big THANK YOU for your contribution above I really needed this for my website and stumbled across your post. Needless to say, you are very kind to have posted this and I can assure you if and when I find an answer to something someone else might need I will return the favour. Cheers, my friend and all the best!

P.S. If by any chance you know how to change the distance of the text to the checkbox I would really appreciate it. The text currently sits right up against the checkbox.

[gjh42]

Probably something like

.wrapperAttribsOptions label {margin: 0.3em;}

If that doesn't do it, post a link to your site so we can give an exact answer for you.

[DivaVocals]

Just wanted to say a big THANK YOU for your contribution above I really needed this for my website and stumbled across your post. Needless to say, you are very kind to have posted this and I can assure you if and when I find an answer to something someone else might need I will return the favour. Cheers, my friend and all the best!

You are very welcome.. Glad you found it helpful..

[fairy]

Hi! I have been searching and searching. I have tried all of the fixes that I can find in the forums, but none seem to be working for me.

I understand the difference between the Attributes and the Option Values and I apologize to the original poster for asking the same thing again.

Can someone take a look at this page.

http://www.graphxfairy.com/auction-t...ction-template

I am trying to put my Options Values in columns. I have already set the area in the admin correctly to reflect 3 images per row with the attribute style to 4.

I know I am missing something or I have some template override affecting this, but I can't seem to locate it.

Any ideas?