How to properly align textboxes on a webpage with labels

Question

this is a CSS / design question. I have three textboxes that i want to be center aligned on a web page. Then i want a label description to the right of each one.

When i use attribute like text:align:centre because the labels are of different length it throws out the aligment of the textboxes [see image link below]

http://www.mediafire.com/imageview.php?quickkey=qcyoajm2iuk

Is there an easy way of keeping the textboxes aligned and then have the labels off the to the right without changing the textboxes?

Thanks.

Answer 1

basically you have to define a width for your form and float: left input and float: right the label, so the label gets next to your input. The is a trick to center relative possitionet elements in CSS: margin: 0 auto but you have to define a width.

The problem you gonna have is that all your inputs are gonna be next to each other. In order to prevent that you nest your label and input in a element. And clear the floats. I would use a UL LI element and not Paragraphs (like in PW example), because most of the time, your form, is a list of questions.

I have made up an example for you: http://jsfiddle.net/Qs4pk/2/

Answer 2

use the <fieldset> tag in combination with <label>. Step by step explanation.
Then align at will.