Question

The following code should allow me to have the label and input field sitting one next to each other.
Any idea what the problem is?

.form{
    width:500px;
    float:left;
    padding:20px 50px;
    background-color:orange;
}

label.form{
    float:left;
    clear:left;
    margin-bottom:8px;
}

input.input{
    width:400px;
    padding:5px 20px;
    margin-bottom:8px;
    background:#F7F7F7;
    border-width:1px;
    border-style:solid;
    border-color:#333333;
}

<div class="form">
    <form action="process.php" method="post">
        <label class="form">Name</label><input type="text" name="name" class="input" />
        <label class="form">Position</label><input type="text" name="position" class="input" />
        <label class="form">Company</label><input type="text" name="company" class="input" />
        <label class="form">Address</label><input type="text" name="address1" class="input" />
        <label class="form">Town/ City</label><input type="text" name="town" class="input" />
        <label class="form">Postcode</label><input type="text" name="postcode" class="input" />
        <label class="form">Contact No.</label><input type="text" name="phone" class="input" />
        <input type="submit" name ="getcatalogue" class="button" value="Request Catalogue"/>
    </form>
</div>

For some reason, the label is sitting above each field?
Any help would be massively appreciated!

Thanks

Answer 1

It’s because the label elements, being in class form, have 50px padding on left and right, making the total width so large that the input element does not fit on its right size, within the width of 500px set for the form.

It’s easy to get confused if you use the same class name for essentially different elements, as here (form and label). The label elements hardly need a class, since they can be referred to using suitable contextual selectors, using their ancestor’s class.

A much better design would use a table with labels in one column, input fields in the other, first without any width settings, then perhaps tuned if needed.