Question

I need to place help text below labels and finding it tricky getting the CSS correct for it.

I have created the jsfiddle below as an example.

The requirements are:

1. The label is left aligned
2. The help text is shown directly below it
3. The input and select controls appear on the same line

http://jsfiddle.net/brendan_rice/paSR2/2/

Can anyone help please?

Answer 1

Please check,

http://jsfiddle.net/paSR2/4/

Changes

label {
display: block;
font-size: .9em;
float: left;
clear: left;
width: 52px; <----- /*changed*/
margin: 0px;
padding: 0px
}

Without hard coded width

label {
display: block;
font-size: .9em;
float: left;
clear: left;
margin: 0px;
padding-right: 5px;
}