how to make dynamic two-column layout for custom options

Question

I'm trying to figure out how to style a product detail page that right now has 24 custom options, but there may at times be more or less. I want them to be in two columns instead of the default one column (as it makes the product detail page very long). Any ideas on how to achieve this without much fuss?

I know that the options are printed out in a for loop at the bottom of options.phtml inside of

<fieldset> 
<dl>
 <dt>option 1:</dt>
 <dd>input box </dd>
</dl>
 </fieldset>

can i achieve this using fieldset or is it better to change the javascript and use a table or divs?

Answer 1

the maybe easiest solution would be the use of css3 multi column features.

• http://www.w3schools.com/css/css3_multiple_columns.asp
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts

But they dont work on older browsers.

There are also some other css tricks you can use for list elements based on float, but this can get tricky and time consuming.

Another maybe easy way could be some js, which splits the list in two lists, you can put side by side.