Aligning Validation Control with Textbox

I have开发者_StackOverflow社区 this annoying problem where my validation controls refuse to be in the same line as my textboxes.

The one method was to create the controls in a table, but I was not interested in that technique. I attempted a few CSS techniques, but the results were constantly wrong.

I just want the asterisk to appear to the right of the textbox if the textbox does not contain a value.

Any recommendations?

The code is very simple:

<p>
<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">Username:</asp:Label>
<asp:TextBox ID="UserName" runat="server" CssClass="textEntrySmall"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" CssClass="failureNotification" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="LoginUserValidationGroup">*</asp:RequiredFieldValidator>
</p>

and the css:

input.textEntrySmall
{
width: 130px;
border: 1px solid #ccc;
}
input.passwordEntrySmall
{
width: 130px;
border: 1px solid #ccc;
}

Thank you.

---

In your css try these changes.

p{
    display:table-row;
}
input, span, label{
    display:table-cell;
}

If you have older browsers like IE6, IE7 then use this. It also works in modern browsers.

p {
     white-space:nowrap;
}

---

try with:

p {
  width: 100%;
}
.failureNotification {
  width: 50px;
}

---

What also works is changing the asterisk in the validation control to a non-breakable space and then the asterisk...

thus, from:

<asp:RequiredFieldValidator [...SNIP...] >*</asp:RequiredFieldValidator>

To

<asp:RequiredFieldValidator [...SNIP...] >&nbsp;*</asp:RequiredFieldValidator>

---

Please remove AssociatedControlID attribute and you will be all set.