CODEWITHSUNDEEP
htmlcsslabel
macha
macha

Reputation: 7487

Label is displayed below the input textbox

This is my input code sample. So whenever an error is generated, this error label would be visible. But it is coming up below the input element. I want it to be on the right side of the input.

I am able to modify the css for this bit using the label.error code bit I have. Label being the type and error is the class of that label being generated.

label.error
{
display:inline;
float:right;
}


> <td><input
> name="answer_engineeringjobs_1^11"
> id="answer_engineeringjobs_1"
> class="reqfield required zipUS error"
> type="text"><label class="error"
> generated="true"
> for="answer_engineeringjobs_1">This
> field is required.</label></td>

Upvotes: 0

Views: 3347

Answers (4)

Spiny Norman
Spiny Norman

Reputation: 8327

Put the <label> before your <input> element. I know it's strange, but it will probably work.

Edit: wait, maybe you can't alter the order of your tags, in which case this is not very good advice.

Edit some more: You could try adding:

td {
    white-space: nowrap;
}

to your css, so the label won't show up below the textbox anymore. You wouldn't need the float code anymore. HOWEVER, all td's would stop wrapping text, which may not be what you want. David's answer may be better.

Upvotes: 1

Ben
Ben

Reputation: 16543

It is actually the parent(s) element(s) size that causes the line break. There's nothing wrong with you code as you can see here:

http://jsfiddle.net/Pc2QB/

Upvotes: 0

ITg
ITg

Reputation: 138

One or the other is a block. If one of them is a block it will cause the elements to stack on top of each other. Either float as David Dorward suggested or set them to display inline

Upvotes: 0

Quentin
Quentin

Reputation: 943220

Floating an element makes it a block, which triggers a new line before it.

You would need to float the input left too.

Upvotes: 1

Related Questions