how to create a 2 column to seperate label and input element in a form

My form looks like:

**

开发者_运维问答    <p><label>first name</label><input type=text name=fn /></p>
    <p><label>last name</label><input type=text name=ln /></p>

</div>
<div id="rightform">
    <p><label>state</label><input type=text name=state /></p>
    <p><label>city</label><input type=text name=city /></p>

</div>

**

I want the layout so all the labels line up on the left (with the label text right-aligned), and the input box all lined up, floating to the left.

So the form should look like:

          asdf-label INPUTBOX
           123-label INPUTBOX
   yet-another-label INPUTBOX

There will be another form on the right side of the above form (with the id=#rightform)

Really confused how to do this properly...

Personally I seldom use the floating technique, even though it's very common. The reason: It's very brittle for more complex situations.

I almost always do this:

<form ...>
  <p>
    <label for="id1">Label 1</label>
    <input id="id1" ... />
  </p>
  <p>
    <label for="id2">Label 2</label>
    <input id="id2" ... />
  </p>
</form>

And CSS:

p {
  position: relative;
}
label {
  position: absolute;
  width: 150px;
  left: 0;
  top: Xpx /* x to align nicely with the baseline of the text in the input */
}
input {
  margin-left: 160px;
}

It's very seldom a problem with multiline labels that overflow the <p>.

To make it work in IE6 and possibly IE7 you need to throw in something to give the <p> hasLayout. zoom: 1; does the trick, or specifying a width.

This should do it:

label {
    width: 150px;
    margin-right: 10px;
    text-align: right;
    float: left;
}

No need for any special styling for the input elements.

As for the divs, just give them a fixed width and float: left;, they'll align next to each other nicely. Just use clear: both; where necessary.

You will need to float all your labels to the left, set them to a fixed with, and then text-align them right:

label {
  float:left;
  text-align:right;
  width:20em;
}

p {
  clear:right;
}

The easiest way is to float elements and set a width and text-align: right for labels.

Something like:

label {
    width:200px;
    text-align:right;
}

input {
    float:left;
}

You can check http://jeffhowden.com/code/css/forms/ for an all css example

Well easy way is table, but that is not correct.

<div style="float: left; width: 100px;">
    <label>last name</label>
</div>
<div style="margin-left: 100px;">
    <input type=text name=state />
</div>