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

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.