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.

Custom form layout question

  1. Michael
    Member

    I have created a form on the following url: http://www.decoridesigns.info/style

    What I would like to do is have a 4 column layout, but have the fields populate horizontally. What I did was make each field have a width of 25% and float left. I'm not sure why, but instead of having 3 rows of 4 fields, my result was 4 rows, the top row has 4 fields, the middle rows have 3 fields, and the bottom row has 2 fields.

    What would you suggest to achieve my desired outcome instead of the appearance that I currently have?

    Thank you,
    Jason

    Posted 12 years ago on Wednesday July 7, 2010 | Permalink
  2. looks like you missed one of the field ids in your rule. I believe that's causing the odd floating you're seeing. You can simplify this with some inheritance.. just target any list item in that checkbox list

    try this

    ul#input_4_1 {overflow:hidden;}
    ul#input_4_1 li {float:left; width:25%;}

    Now, there are some properties (margins, padding, etc) that may effect the width percentage, so for 4 columns, you may actually have to specify the width as 23% or something like that. It depends on what they inherit from other CSS rules but you can tinker with it and see what works.

    Let me know if you still have problems and we'll proceed from there.

    Posted 12 years ago on Wednesday July 7, 2010 | Permalink
  3. Michael
    Member

    Thank you for your quick response. I tried your suggestion and the result is a one column layout down the left side of the page. I tried the code you gave me with 25% and 23% and with and without the code I previously had... all results gave me the one column layout.

    Maybe this will help... Here's the line of code that I had previously that gave me the layout I described in the first post:

    #field_4_1 .gchoice_1_1, .gchoice_1_2, .gchoice_1_3, .gchoice_1_4, .gchoice_1_5, .gchoice_1_6, .gchoice_1_7, .gchoice_1_8, .gchoice_1_9, .gchoice_1_10, .gchoice_1_11, .gchoice_1_12 {
    float: left;
    width: 23%;
    }

    Thank you,
    Jason

    Posted 12 years ago on Thursday July 8, 2010 | Permalink
  4. Jason,

    I'm looking at your form with my code inspector and don't see any reference to either CSS rule now. When I'm looking at the CSS file directly, I see the rule at the bottom.

    When running it through the validator checking for errors it was flagging that section. After some staring at it, I see the issue.. your syntax is wrong.. your brackets are mismatched.. both should be curly brackets.

    It should be like this.

    ul#input_4_1 {overflow:hidden;}
    ul#input_4_1 li {float:left; width:25%;}

    You won't need that last line with the specific field id's either, these should apply the rule to all the children of that list.

    Posted 12 years ago on Thursday July 8, 2010 | Permalink
  5. Michael
    Member

    It works! Thank you very much for your help. I feel kind of stupid for the bracket mistake... I appreciate you taking the time to examine it close enough to catch it.

    Posted 12 years ago on Saturday July 10, 2010 | Permalink
  6. No worries. Glad you got it working.

    Posted 12 years ago on Sunday July 11, 2010 | Permalink

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