Question

When I click sumbit on the form found here:

http://test-bed.co.uk/garden/book.php

The validation messages don’t appear as desired, I would like them to appear alongside the input elements as if they were inline.

I believe the label or input styling rules could be causing the problem. As they are floated the containg div with an id of form is floated left.

#aform label {
    clear: both;
    display: block;
    float: left;
    font-weight: bold;
    text-align: left;
}

.inputstyle2 {
    float: left;
    margin-right: 240px;
    width: 300px;
}

#form {
    float: left;
}

Any suggestions and explanations of what I have done wrong would be much appreciated.

Answer 1

First you need to remove margin-right and add clear: both within .inputstyle2:

.inputstyle2 {
    clear: both;
    width: 300px;
}

The error labels will still be placed underneath the input field as they inherit clear: both in #aForm label which is removing the float effect. Thankfully you can override this by using a more specific CSS selector and removing the clear:

#aForm label.error {
    clear: none;
}