CODEWITHSUNDEEP
htmlcss
Ayush
Ayush

Reputation: 42450

Set size of span to static so it doesn't depend on size of content

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.

Standard error size

longer error

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;

}

Upvotes: 1

Views: 114

Answers (4)

David Hobs
David Hobs

Reputation: 4511

Shadow Wizard beat me to the punch. Use floating divs. By setting display to block, the floating, widths work Here's the solution in jsFiddle

First See the result, then uncomment the javascript and run again to see the difference with more text added.

Since you're putting them in floating div's I'd suggest doing the same with the formatting above. It'll depend on the logic of your layout, but my guess is that for this situation, you essentially want to columns per se, or two blocks. Thus the left side in a div {float:left; width: 200px; } and the next div with same style, float left and all. So make that a class and set both div's to that class.

Then clear the div's when finished with clear: both. If you don't clear floats, bad things happen.

Look into the css display property, as floating, inline, etc is something that takes a bit to get your head around, but it's important to learn thoroughly off the bad.

Best of luck!

Upvotes: 0

Andrea Artuso
Andrea Artuso

Reputation: 89

I would use a table instead, replacing span(s) with columns. If you don't want to use a table, you can always use two div(s) with the float=left trick.

Anyway I'll add also a simple: text-align: left; to nameerror and emailerror and I'll also remove the padding-left to emailerror.

Upvotes: 0

Shadow Wizard
Shadow Wizard

Reputation: 66388

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.

Upvotes: 1

Robyn P
Robyn P

Reputation: 664

Try putting your form into a table -- that way, the position of the contents in one column (the "name" side of the form) won't directly affect the position of the contents in the other column as you're seeing here.

Upvotes: 1

Related Questions