Yet Another Divs vs Tables issue: Forms

by

What I usually do is :

<form>
 <label for="param_1">Param 1</label>
 <input id="param_1" name="param_1"><br />
 <label for="param_2">Param 2</label>
 <input id="param_2" name="param_2"><br />
</form>

and in a CSS :

label,input { display: block; float: left; margin-bottom: 1ex; }
input { width: 20em; }
label { text-align: right; width: 15em; padding-right: 2em; }
br { clear: left; }

Of course, you’ll have to define the width according to your actual data 🙂

  • First, give label and input display: block, so that it can be assigned a size and be lined up.
  • They both get float: left because Explorer does things a bit differently
  • Format the label nicely
  • hack the br so that there’s a clear: left somewhere, and I remember that putting it on the label didn’t work on some browser.

Plus, with the br you get a nice formatting even if the browser does not support CSS 🙂

More Related Contents:

  1. Fixed Table Cell Width
  2. Set cellpadding and cellspacing in CSS?
  3. How to center an element horizontally and vertically
  4. How do you keep parents of floated elements from collapsing? [duplicate]
  5. CSS: Width in percentage and Borders
  6. Word-wrap in an HTML table
  7. How to deal with page breaks when printing a large HTML table
  8. HTML/CSS: Making two floating divs the same height
  9. CSS3’s border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  10. Make a div fill the height of the remaining screen space
  11. Fixed header table with horizontal scrollbar and vertical scrollbar on
  12. How can I set the max-width of a table cell using percentages?
  13. Add a horizontal scrollbar to an HTML table
  14. Wrap text in tag
  15. Rounded table corners CSS only
  16. using text-align center in colgroup
  17. Difference between position:sticky and position:fixed?
  18. Can a span be closed using ?
  19. Giving a border to an HTML table row,
  20. overflow:scroll; in
  21. Linethrough/strikethrough a whole HTML table row
  22. Equivalent to float in Outlook
  23. Table overflowing outside of div
  24. The border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  25. Border around tr element doesn’t show?
  26. with fixed and scrollable [duplicate]
  27. CSS: display:block; vs display:table;
  28. Styling the last td in a table with css
  29. Setting max-height for table cell contents
  30. How to make a table with equal column widths in CSS?

Leave a Comment