2-column layout for form without tables

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • jhardman
    Recognized Expert Specialist
    • Jan 2007
    • 3405

    2-column layout for form without tables

    People keep saying this is possible, but I'm not sure I see it. If I had used a table it would have been done a day ago, but without the table the labels and inputs don't line up. Everything I have tried will line up the inputs at some window sizes, but if I resize the window the next input pops over the the right, or goes up a line. Where is the alleged advantage of using strict css positioning?

    Here's my form:
    Code:
    <html><head><title>Scholarship form</title>
    <style>
    
    label {
    width:30%;
    float:left;
    text-align:right;
    margin-right: 5px;
    }
    
    input, textarea {
    float: none;
    display: inline;
    }
    
    </style>
    </head>
    <body>
    <h1>Scholarship form</h1>
    <form>
    <label for="applName">Name:</label><input type="text"
    name="applName" ><br>
    <label for="applAddress">Address:</label><textarea
    name="applAddress" rows="2" cols="30"></textarea><br>
    <label for="applPhone">Phone:</label><input 
    
    type="text" name="applPhone"><br>
    <label for="applEmail">Email:</label><input 
    type="text" name="applEmail"><br>
    <label for="canPay">Can you attend this conference 
    without the scholarship?</label><input type="text" 
    name="canPay" size="4"><br>
    <label for="acceptPartial">Can you attend with a 
    partial scholarship?</label><input type="text" 
    name="acceptPartial" size="4"><br>
    <label for="howWillBenefit">How will attending this 
    conference help you?
    </label><textarea name="howWillBenefit" cols="35" 
    rows="4"></textarea><br>
    <input type="submit" name="submit" value="Submit 
    Scholarship Application">
    </form>
    </body></html>
    Jared
  • danp129
    Recognized Expert Contributor
    • Jul 2006
    • 323

    #2
    Is this more like what you're wanting?
    Code:
    <html>
    <head>
        <title>Scholarship form</title>
        <style type="text/css">
            label
            {
                clear: left;
                float: left;
                width: 30%;
                text-align: right;
                margin-right: 5px;
            }
            
            input, textarea
            {
                float: left;
                clear: right;
                display: inline;
            }
        </style>
    </head>
    <body>
        <h1>
            Scholarship form</h1>
        <form>
        <label for="applName">
            Name:</label><input type="text" name="applName">
        <label for="applAddress">
            Address:</label><textarea name="applAddress" rows="2" cols="30"></textarea>
        <label for="applPhone">
            Phone:</label><input type="text" name="applPhone">
        <label for="applEmail">
            Email:</label><input type="text" name="applEmail">
        <label for="canPay">
            Can you attend this conference without the scholarship?</label><input type="text"
                name="canPay" size="4">
        <label for="acceptPartial">
            Can you attend with a partial scholarship?</label><input type="text" name="acceptPartial"
                size="4">
        <label for="howWillBenefit">
            How will attending this conference help you?
        </label>
        <textarea name="howWillBenefit" cols="35" rows="4"></textarea>
        <label>
            &nbsp;</label>
        <input id="submit" type="submit" name="submit" value="Submit 
        Scholarship Application">
        </form>
    </body>
    </html>

    Comment

    • jhardman
      Recognized Expert Specialist
      • Jan 2007
      • 3405

      #3
      nope, didn't help. Notice the input where I have typed in the word "this" in the picture.

      this is the input for the question "Can you attend with a partial scholarship?" which is a properly formatted form label. The problem is more pronounced in internet explorer (on the left) but is still there in ff on the right. Depending on screen resolution the input does not line up with the label and this would be trivial to fix with a table.

      Jared

      Comment

      • lgm001
        New Member
        • Jan 2012
        • 9

        #4
        can I make a suggestion here? I prefer not to use floats, because this usually results in complete strangeness. For forms I have been using the following format these day...
        Code:
        <fieldset>
        <legend>My Formname or section name</legend>
        
        <div>
        <label for="controlname">Hello</label>
        <input type="text" id="controlname" />
        
        <label for="controlname2">Hello</label>
        <input type="text" id="controlname2" />
        
        </div>
        
        <div>
        <label for="controlname3">Hello</label>
        <input type="text" id="controlname3" />
        
        <label for="controlname4">Hello</label>
        <input type="text" id="controlname4" />
        
        </div>
        </fieldset>
        with this structure, you can use the following CSS
        Code:
        fieldset { border: ...; specify a width here etc }
        fieldset.div {width: [I]1/2 the width you specified above[/I]; white-space: nowrap; display: inline-block;}
        label[for] { width: 120px; display: inline-block;  }
        input[type="text"] { width: 200px; }
        textarea { width: 198px; }
        perfect placement... :)
        Also, you can do some really clever positioning if you need to all relative to the label and textbox. You may want to also look into things like adjacent selectors.
        I usually add a span inside my label, this can then be absolutely positioned, and then be used with jQuery for various tooltip effects.
        Last edited by Frinavale; Jan 31 '12, 08:48 PM. Reason: Added code tags.

        Comment

        • danp129
          Recognized Expert Contributor
          • Jul 2006
          • 323

          #5
          Did you copy the entire code? Here's what it looks like on FF9 and IE9.
          Attached Files

          Comment

          • jhardman
            Recognized Expert Specialist
            • Jan 2007
            • 3405

            #6
            Dan, it was totally broken in my IE9, copied exactly from your post.

            Jared

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434

              #7
              You will never get IE to attempt to perform like the other far more modern browsers without a doctype. Put this on your first line:
              Code:
              <!DOCTYPE html>

              Comment

              • danp129
                Recognized Expert Contributor
                • Jul 2006
                • 323

                #8
                Add the doctype like drhowarddrfine said, IE is probably using quirks mode.

                Comment

                • danp129
                  Recognized Expert Contributor
                  • Jul 2006
                  • 323

                  #9
                  lgm001,
                  Your rule "fieldset.d iv" doesn't do anything, it should be called "fieldset div" to select div elements below a fieldset element. When I make that change it breaks your intended layout.

                  Comment

                  • lgm001
                    New Member
                    • Jan 2012
                    • 9

                    #10
                    Sorry ... typo.

                    I stand corrected.

                    Comment

                    Working...