CODEWITHSUNDEEP
htmlcss
Burt
Burt

Reputation: 7758

CSS positioning help text in a form

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?

Upvotes: 0

Views: 160

Answers (3)

Sumesh TG
Sumesh TG

Reputation: 450

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;
}

Upvotes: 1

Clayton
Clayton

Reputation: 457

I Made some modifications to your design:

http://jsfiddle.net/paSR2/13/

Is this what you are after?

Upvotes: 1

Alex
Alex

Reputation: 9031

Slightly rejigged your code and css, see here:

http://jsfiddle.net/paSR2/9/

Upvotes: 1

Related Questions