Label and input box are reversed in form

Question

I have a contact us form and for Name and Email addressing, the labels and input boxes show nicely, vertically aligned and having the same margin. However, later in the form (starting with "Subject"), the input box comes first and thereafter the label, somehow it got reversed (?). How to fix that it everything looks as same structure as Name and Email addressing?

Attached my Fiddle... Fiddle

HTML:

    <form>

        <div class="contactus-name">
            <label accesskey="n" for="Name">Name</label> <input maxlength=
            "60" name="name" type="text">
        </div>

        <div class="contactus-email">
            <label accesskey="e" for="email">Email addressing</label>
            <input maxlength="40" name="email" size="40" type="text">
        </div>

        <div class="contactus-subject">
            <label accesskey="s" for="reason">Subject</label> <select name=
            "reason">
                <option value="1">
                    One
                </option>

                <option value="2">
                    Two
                </option>

                <option value="3">
                    Three
                </option>
            </select>
        </div>

        <div class="contactus-comments">
            <label accesskey="c" for="comments">Comments</label> 
            <textarea cols="50" name="comments" rows="8">
</textarea>
        </div>

        <div class="contactus-antispam">Enter anti-spam code:<br>
        <img alt="verification code" border="1" src="image"></div>

        <div class="contactus-antispam-code">
            <label accesskey="c" for="vericode">Code</label> <input name=
            "vericode" size="20" type="text">
        </div>

        <div class="contactus-submit">
            <input name="submit" type="submit" value="Send">
        </div>
    </form>

CSS

.contactus {
    position:relative;
    display:block;
    text-align:left;
    border-style:dashed;
}

.contactus-name {
    padding-left:40px;
    padding-bottom:5px;
}

.contactus-name label {
    float:left;
    margin-right:4.0em;
    display: block;
    width:10em;
}

.contactus-email {
    padding-left:40px;
    padding-bottom:5px;
}

.contactus-email label {
    float:left;
    margin-right:4.0em;
    display: block;
    width:10em;
}

.contactus-subject {
    padding-left:40px;
    padding-bottom:5px;
}

.contactus-subject select {
    float:left;
    display:block;
    width:10em;
    margin-right:4.0em;
}

.contactus-comments {
    padding-left:40px;
    padding-bottom:5px;
}

.contactus-comments textarea {
    float:left;
    display:block;
    width:10em;
    margin-right:4.0em;
}

.contactus-antispam {
    padding-left:40px;
    padding-bottom:5px;
}

.contactus-antispam-code {
    padding-left:40px;
    padding-bottom:5px;
}

.contactus-antispam-code label {
    float:left;
    display:block;
    width:10em;
    margin-right:4.0em;
}

Answer 1

you applied the css to the wrong elements by mistake.

instead of:

.contactus-subject select {

you needed to do

.contactus-subject label{

and so on with all the reversed elements.

among the rest of the style attributes in those classes, you have float:left which you applied to the textbox and select instead of the description label.

float:left floats the element to the leftmost side, and since you have applied it to the select/textarea, it sent them to the very left.

Answer 2

Because .contactus-subject select has float:left and its label doesn't.

Add this css class:

.contactus-subject label{
    float:left;
    width: 10em;
    width:10em;
    margin-right:4.0em;
}

And perhaps delete the old one