PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

How to create 2 columns

  1. Hi,

    I've read the other posts regarding creating columns however, I still am unable to figure out exactly what I need to do. Unfortunately I am not a programmer. Say I have a form with 20 options and I want to split them into 2 columns so they don't look too long. My questions are:

    1. Where can I find the css code to achieve this?
    2. Exactly where do i paste this css code?

    Appreciate any help. Thanks

    http://virtualassistant.vaphilippines.com/form/

    Posted 11 years ago on Thursday September 2, 2010 | Permalink
  2. There really isn't any generic CSS markup that will work for every form. Basically, you would use the float property to achieve this. For your particular form, I viewed the source, looked at the ID on the unordered list, then used this rule to create 4 columns of checkboxes.

    #input_1_6 li {width:25%; margin:0; min-height:1.8em; float:left}

    you would add that to the end of your theme's style.css file.

    view test screenshot

    If you wanted just 2 columns, you would simply adjust the width to 50%, 3 columns would be 33%, etc.

    This works really well for checkboxes and radio buttons with short, single line labels. It's a bit more difficult when you're trying to manage other fields.

    Posted 11 years ago on Friday September 3, 2010 | Permalink
  3. Having drag-and-drop placement of fields would be really cool. I know it would probably be difficult, but... :)

    Posted 11 years ago on Friday September 3, 2010 | Permalink
  4. Kevin,

    Thanks so much but when I try it on my dummy site, it works. When i try it on my real site, even though I adjust the form ID number, it still doesn't work. :( I can't quite figure out what I'm doing wrong. Appreciate your help please!

    Here's the real site. Can't make it work.
    http://whatareyoudealingwith.com/free-assessment-2-2/what-are-you-dealing-with-to-grow-your-business-free-assessment/

    Posted 11 years ago on Tuesday September 7, 2010 | Permalink
  5. looks like you have the field id wrong. Try this.

    #input_8_4 li {width:50%; margin:0; min-height:1.8em; float:left}

    That worked okay for me. screenshot

    Posted 11 years ago on Tuesday September 7, 2010 | Permalink
  6. Kevin... it works! you are a most wonderful wonderful savior! Thank you soooo much!!!!

    Posted 11 years ago on Friday September 10, 2010 | Permalink
  7. Great news. I'm pleased that I could help.

    Posted 11 years ago on Friday September 10, 2010 | Permalink

This topic has been resolved and has been closed to new replies.