By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,566 Members | 1,749 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,566 IT Pros & Developers. It's quick & easy.

2-column layout for form without tables

jhardman
Expert 2.5K+
P: 3,405
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:
Expand|Select|Wrap|Line Numbers
  1. <html><head><title>Scholarship form</title>
  2. <style>
  3.  
  4. label {
  5. width:30%;
  6. float:left;
  7. text-align:right;
  8. margin-right: 5px;
  9. }
  10.  
  11. input, textarea {
  12. float: none;
  13. display: inline;
  14. }
  15.  
  16. </style>
  17. </head>
  18. <body>
  19. <h1>Scholarship form</h1>
  20. <form>
  21. <label for="applName">Name:</label><input type="text"
  22. name="applName" ><br>
  23. <label for="applAddress">Address:</label><textarea
  24. name="applAddress" rows="2" cols="30"></textarea><br>
  25. <label for="applPhone">Phone:</label><input 
  26.  
  27. type="text" name="applPhone"><br>
  28. <label for="applEmail">Email:</label><input 
  29. type="text" name="applEmail"><br>
  30. <label for="canPay">Can you attend this conference 
  31. without the scholarship?</label><input type="text" 
  32. name="canPay" size="4"><br>
  33. <label for="acceptPartial">Can you attend with a 
  34. partial scholarship?</label><input type="text" 
  35. name="acceptPartial" size="4"><br>
  36. <label for="howWillBenefit">How will attending this 
  37. conference help you?
  38. </label><textarea name="howWillBenefit" cols="35" 
  39. rows="4"></textarea><br>
  40. <input type="submit" name="submit" value="Submit 
  41. Scholarship Application">
  42. </form>
  43. </body></html>
Jared
Jan 23 '12 #1
Share this Question
Share on Google+
9 Replies


danp129
Expert 100+
P: 321
Is this more like what you're wanting?
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.     <title>Scholarship form</title>
  4.     <style type="text/css">
  5.         label
  6.         {
  7.             clear: left;
  8.             float: left;
  9.             width: 30%;
  10.             text-align: right;
  11.             margin-right: 5px;
  12.         }
  13.  
  14.         input, textarea
  15.         {
  16.             float: left;
  17.             clear: right;
  18.             display: inline;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <h1>
  24.         Scholarship form</h1>
  25.     <form>
  26.     <label for="applName">
  27.         Name:</label><input type="text" name="applName">
  28.     <label for="applAddress">
  29.         Address:</label><textarea name="applAddress" rows="2" cols="30"></textarea>
  30.     <label for="applPhone">
  31.         Phone:</label><input type="text" name="applPhone">
  32.     <label for="applEmail">
  33.         Email:</label><input type="text" name="applEmail">
  34.     <label for="canPay">
  35.         Can you attend this conference without the scholarship?</label><input type="text"
  36.             name="canPay" size="4">
  37.     <label for="acceptPartial">
  38.         Can you attend with a partial scholarship?</label><input type="text" name="acceptPartial"
  39.             size="4">
  40.     <label for="howWillBenefit">
  41.         How will attending this conference help you?
  42.     </label>
  43.     <textarea name="howWillBenefit" cols="35" rows="4"></textarea>
  44.     <label>
  45.         &nbsp;</label>
  46.     <input id="submit" type="submit" name="submit" value="Submit 
  47.     Scholarship Application">
  48.     </form>
  49. </body>
  50. </html>
Jan 24 '12 #2

jhardman
Expert 2.5K+
P: 3,405
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
Jan 25 '12 #3

P: 9
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...
Expand|Select|Wrap|Line Numbers
  1. <fieldset>
  2. <legend>My Formname or section name</legend>
  3.  
  4. <div>
  5. <label for="controlname">Hello</label>
  6. <input type="text" id="controlname" />
  7.  
  8. <label for="controlname2">Hello</label>
  9. <input type="text" id="controlname2" />
  10.  
  11. </div>
  12.  
  13. <div>
  14. <label for="controlname3">Hello</label>
  15. <input type="text" id="controlname3" />
  16.  
  17. <label for="controlname4">Hello</label>
  18. <input type="text" id="controlname4" />
  19.  
  20. </div>
  21. </fieldset>
with this structure, you can use the following CSS
Expand|Select|Wrap|Line Numbers
  1. fieldset { border: ...; specify a width here etc }
  2. fieldset.div {width: 1/2 the width you specified above; white-space: nowrap; display: inline-block;}
  3. label[for] { width: 120px; display: inline-block;  }
  4. input[type="text"] { width: 200px; }
  5. 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.
Jan 25 '12 #4

danp129
Expert 100+
P: 321
Did you copy the entire code? Here's what it looks like on FF9 and IE9.
Attached Images
File Type: jpg csstest.jpg (68.0 KB, 341 views)
Jan 25 '12 #5

jhardman
Expert 2.5K+
P: 3,405
Dan, it was totally broken in my IE9, copied exactly from your post.


Jared
Jan 25 '12 #6

drhowarddrfine
Expert 5K+
P: 7,435
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:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
Jan 25 '12 #7

danp129
Expert 100+
P: 321
Add the doctype like drhowarddrfine said, IE is probably using quirks mode.
Jan 25 '12 #8

danp129
Expert 100+
P: 321
lgm001,
Your rule "fieldset.div" 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.
Jan 25 '12 #9

P: 9
Sorry ... typo.

I stand corrected.
Jan 26 '12 #10

Post your reply

Sign in to post your reply or Sign up for a free account.