input group html,html - Align group of labels and inputs - Stack Overflow

For your two columns, you'll want to put them in container divs, which could then be floated against each other or absolutely positioned, or whatever works for your layout.

To make the labels take up the same amount of room, they can be styled with a width attribute.

Finally, in your diagram, you've got the labels left-justified and the inputs right-justified. That's doable, but to my eyes it scans better if the inputs are justified toward their labels.

I've got it all in a fiddle here: http://jsfiddle.net/M7AjF/

Option 1

All

Option 2

Option 3

Option 4

--

Option 5

0

Option 6

1

And the css:

.form-column {

width: 50%;

float:left;

}

.form-column label {

width: 40%;

padding-right: 10%;

}

/*

This right justifies your inputs, which I don't recommend.

.form-column select, .form-column input {

float: right;

}

.form-column br {

clear: right;

}

*/