Floating the auto generated HTML - html

Question

I've got following auto generated HTML, which I can not change.
This HTML displays the message in em before the input field, however I need to move it to the right side of the input field.
I have tried using float right to the em, but it does not work.
I'll appreciate any help.
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>

Answer 1

CSS Only solution (which I don't recommend, but works)
The jsfiddle: http://jsfiddle.net/rLhTs/
HTML:
<table>
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>
<tr class="form-field">
<th scope="row">
<label for="user_name">Name</label>
<em>Name is required.</em>
</th>
<td>
<input type="text" value="" id="name_email" name="name_email">
</td>
</tr>
</table>
CSS:
​.form-field:nth-child(1):after {
content:"Email is required.";
}
.form-field:nth-child(2):after {
content:"Name is required.";
}
​
You'll just have to declare the :after content for nth-child and you'll need to know specifically what you're trying to replace.
This is a JavaScript solution:
Check out this jsFiddle: http://jsfiddle.net/E8dJ9/3/
I've expanded it to show you it could work for any number of rows. You may have to refine this a bit depending on your real specific use case.
And the code for completeness:
HTML:
<table>
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>
<tr class="form-field">
<th scope="row">
<label for="user_name">Name</label>
<em>Name is required.</em>
</th>
<td>
<input type="text" value="" id="user_name" name="user_name">
</td>
</tr>
</table>
JavaScript (using jQuery):
$('th[scope="row"]').each(function(index, value) {
var em = $(this).find('em').text();
$(this).parent().find('td').append('<em>' + em + '</em>');
});​
CSS:
.form-field th em {
display: none;
}​

Answer 2

Try something like:
​label {
float:left;
}
em {
float: right;
}
input {
float:left;
}
​Although this will put the em on the farthest right spot of the parent container. Considering it is in a table it might work as is, can't test unless we have the full HTML with the opening table tags, etc.

Answer 3

If you are unable to do, use HTML5 validation for email in the input field
<input type="email" title="enter the email in correct format" required="true"/>
whenever the user clicks the submit button without entering the email or entered the email in wrong format, the form will not be submitted and error will be displayed.