Aligning Validation Control with Textbox - asp.net

Question

I have 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.

Answer 1

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

Answer 2

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

Answer 3

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...] > *</asp:RequiredFieldValidator>

Answer 4

Please remove AssociatedControlID attribute and you will be all set.