Yet Another Divs vs Tables issue: Forms

What I usually do is :

 <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 />

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 🙂

Leave a Comment