Question

I have two textboxes (part of a form), in the same line, and under each of them I want to place a <span> to show any errors with the data filled. The problem I’m facing is that the size of the error under the first box changes the position of the error under the second box.

I’ve added some images for clearer understanding.

Here is my html code:

            <form id="notify" method="post" action="add_notify.php">            
            Name: <input type="text" class="formname" name="name" value="" size="20"/>
            Email: <input type="text" class="formname" name="from" value="" size="20"/>
            <input type="submit" class="sendform" name="submit" onclick="processInfo()" value="Go!"/>
            <br/>
            <span id="name_error" class="nameerror">Name Error foo bar blah blah</span>
            <span id="email_error" class="emailerror">Email Error</span>
            </form>

Here is the relevant CSS:

.formname{
    background: #FFFFFF;
    font-family: helvetica, arial, sans-serif;
    color: #000000;
    padding: 10px;
    border: 1px solid #30435D;
    font-size: 18px;
    margin: 0 15px 0 0;
    width: 170px;
    font-weight: bold;
}
.nameerror, .emailerror
{
    color:red;
    font-size:small;
    padding-left:60px;
    width:300px;


}
.emailerror
{
    padding-left:200px;

}

Answer 1

Use floating <div> to show the errors. Block level element is needed so that the width will affect it.

HTML:

<div id="name_error" class="nameerror">Name Error  foo bar blah blah blah blah blah blah blah</div>
<div id="email_error" class="emailerror">Email Error</div>
<div style="clear: both;"></div>

And the CSS:

.nameerror, .emailerror
{
    float: left;
    color: red;
    font-size: small;
    width: 170px;
}

.nameerror
{
    margin-left: 45px;
}
.emailerror
{
    margin-left: 90px;
}

Live test case.

The extra <div> with “clear” is required to show further contents properly, also changed the width to the same width as the input boxes, no point having the errors longer than the inputs they represent.