CODEWITHSUNDEEP
htmlcssforms
Rosemary
Rosemary

Reputation: 167

Input label on two lines next to input field

I want to have one label that is associated with the input field. Some of the labels need to go on more than one line. However, I am not able to view the text. What I am trying to achieve is shown below:

Label 1                      <input />
sub text for label 1

The code I currently have is as follows:

<div class="row">
<label for="height">Height (help text here)</label>
<input name="height" id="height" ... />
</div>

CSS:

form { width: 100%; overflow: hidden; margin-top: -20px;}

form .row { height: 100%; overflow: hidden; padding-left: 140px; width: 295px; line-height: 30px; position: relative; margin-bottom: 6px; }

form label { position: absolute; top: 0; left: 0; line-height: 32px; text-align: left; width: 110px; font-size: 14px; display: inline-block}

There are a few rows that need to be formatted like this. Thank you for any help you can provide.

Upvotes: 3

Views: 32757

Answers (3)

David Thomas
David Thomas

Reputation: 253308

How about:

<div class="row">
<label for="height">Height</label>
<input name="height" id="height" ... />
<label for="height" class="help">help text here</label>
</div>

And CSS:

.row label {
    display: inline-block;
    width: 40%;
}

.row input {
    display: inline-block;
    width: 50%;
    margin: 0 0 0 5%;
}

.row label.help {
    display: block;
}

JS Fiddle demo.

Upvotes: 1

3rgo
3rgo

Reputation: 3153

Try this :

<div class="row">
<label for="height">Height (help text here)</label><input name="height" id="height" ... /><br/>
<label for="height">Sub text</label>
</div>

It may be a workaround to your issue, but not a perfect solution

Upvotes: 3

corroded
corroded

Reputation: 21564

<div class="row">
  <label for="height">Height <br /><span>(help text here)</span></label>
  <input name="height" id="height" ... />
</div>


label {
  display: block;
  float: left;
}

make the label a block element so you can put a br. not a good solution also but it works :P

Upvotes: 4

Related Questions