2-column layout for form without tables

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • jhardman
    Recognized Expert Specialist
    • Jan 2007
    • 3405
    #1

    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
    Tags: None
    • 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

                                        Previous template Next
                                        Working...