align textbox and text/labels in html?

Question

I cant figure it out. How do i align the textbox? I thought using float: left on the labels on the left (then doing it on the input when i notice the input was now on the left without that) but that was completely wrong.

How do i get the textbox align along with the labels on the left of them next to the textbox instead of the far left?

The picture is an example of what i'd like it to look like.

Answer 1

you can do a multi div layout like this

<div class="fieldcontainer">
    <div class="label"></div>
    <div class="field"></div>
</div>

where .fieldcontainer { clear: both; } .label { float: left; width: _ } .field { float: left; }

Or, I actually prefer tables for forms like this. This is very much tabular data and it comes out very clean. Both will work though.

Answer 2

You have two boxes, left and right, for each label/input pair. Both boxes are in one row and have fixed width. Now, you just have to make label text float to the right with text-align: right;

Here's a simple example:

http://jsfiddle.net/qP46X/

Answer 3

Using a table would be one (and easy) option.

Other options are all about setting fixed width on the and making it text-aligned to the right:

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

or, as was pointed out, make them all float instead of inline.