input input - 1 year ago 85
CSS Question

Auto width of the error label

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

alt text

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 Source

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.


    		{width: 50%;
    		margin: 0 auto;

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

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



    <div id="container">


    		<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>



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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download