CSS help. Make validation message appear next to the input field - html

Question

I have a validation message under the field, but I want it to be on the same line.
( Please don't judjge my Front-End skills, specially css and html =) )
now
what I want
CSS
#CHARSET "UTF-8";
#reg-form {
display: block;
width: 600px;
}
#reg-form li {
width: 250px;
display: block;
padding: 5px 5px;
}
#reg-form li label {
width: 150px;
float: left;
}
.status {
font-size: 14px;
color: red;
}
#register-user {
float: left;
margin-left: 7px;
padding: 5px 5px 5px 5px;
}
HTML
{% block main-menu %}
<div class="contentarea">
<form method="post" action="">{% csrf_token %}
<ul id="reg-form">
<li>
<label for="id_username">Username:</label>
<input id="id_username" type="text" name="username" maxlength="30" />
</li>
<div class="status"></div>
<li>
<label for="id_email">Email:</label>
<input type="text" name="email" id="id_email" />
</li>
<div class="status"></div>
<li>
<label for="id_password">Password:</label>
<input type="password" name="password" id="id_password" />
</li>
<div class="status"></div>
<li>
<label for="id_password2">Password (Again):</label>
<input type="password" name="password2" id="id_password2" />
</li>
<div class="status"></div>
</ul>
<input type="button" value="register" id="register-user"/>
</form>
</div>
{% endblock %}

Answer 1

You shouldn't put <div>s inside a <ul> -- it's bad syntax. (Javascript errors come with bad syntax.) Tip: check your source code with W3 validator.
Try using <span>--which is an inline element--instead of <div> (but put the spans inside the corresponding <li>s).
For example:
http://jsfiddle.net/Q7R4k/3/

Answer 2

Your <li>s have display: block; on them. Try changing it to display: inline or display: inline-block on .status and #reg-form li. See http://jsfiddle.net/Q7R4k/. Inline elements will by default stack to the right, while block takes up the whole horizontal line.
You'll need to have line breaks between the lis, though, to get the lis on separate lines. See http://jsfiddle.net/Q7R4k/1/.
EDIT:
See http://jsfiddle.net/Q7R4k/2/ for a version with div's directly after the inputs. Here, the labels are given display:block;, the inputs display:inline-block; (inline would work too) and .status display:inline;. Also, the width of the ul is taken out.