Auto width of the error label

Question

The error label displays till the width of the table. As this:

alt text http://img518.imageshack.us/img518/8864/width1.jpg

How can I display it till the text of the label? This is the css:

 label.error    { color: red; font-size:16px; font-family:Nyala; background-color: #FFFFCC; display:block; width:auto; }

Answer 1

This works, without adding any extra divs (though admittedly there is an extra span (.errorMsg) to contain the error-message:

Using XHTML 1.0 strict doctype.

    <style>

        #container
            {width: 50%;
            margin: 0 auto;
            }

        label   {display: inline-block;
            width: 48%;
            text-align: right;
            }

        input   {display: inline-block;
            width: 50%;
            }
        .errorMsg
            {display: block;
            width: 51%;
            margin: 0 0 0.5em 49%;
            color: #f00;
            background-color: #ffa
            }

    </style>

...

    <div id="container">

        <form>

            <label for="input1">Label 1</label>
                <input type="text" id="input1" name="input1" />
                <span class="errorMsg">Error message</span>

            <label for="input1">Label 2</label>
                <input type="text" id="input2" name="input2" />
                <span class="errorMsg">Error message</span>

        </form>

    </div>

It's worth noting that the width of the .errorMsg is 51%, not 50%, to accomodate the borders of the input (being added to the 50% width defined in the CSS. That may just be FF3.x on Ubuntu 8.04, though. I've not tested exhaustively. Or much at all, I'm afraid. YM, as always, MV.

Demonstration at: http://www.davidrhysthomas.co.uk/so/errorLabels.html.

Answer 2

Wrap the fields with a div, set the div to have the desired width, and set the input and the label to fill the div.

Either that or set the width for both the label and the input to the same pixels. Div method is a bit more flexible.

Note though, the "Name:" prompt is the label. The error should be a span or something, it isn't a "label", at least not in the way HTML thinks about it.