CSS para validación de jQuery

[juanleonardo]

Buenas, mi problema es el siguiente.

Tengo unas validaciones que hago con jquery para un formulario.
El CSS para mostrar la validacion es el siguiente

.campo{
margin:0 auto;
margin-left: 15px;
margin-bottom: 7px;
}

.errores{
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.3);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.3);
background: #F93;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
color: #fff;
display:none;
font-size: 12px;
margin-top: -30px;
margin-left: 238px;
padding: 5px;
position: absolute;
}

<input type="text" name="login" id="login" class="campo" tabindex="1" />
<div id="error1" class="errores">Ingrese Login</div>

El problema es que cuando tengo por ej, dos textbox de distinto anchos, la validacion se muestra a la misma altura y no se ajusta al ancho del textbox.

Espero me puedan ayudar con esto. Muchas gracias

[C2am]

Supongo que jquery cambias el display:none por otro ¿por cual?

[pzin]

Supongo que el problema será esa posición absoluta que estás usando. Si no no hay ningún elemento de contención —elemento con una posición diferente a estática— entonces saldrán todos en el mismo lugar.

[Rafael]

No estoy seguro que script jquery usas, pero yo a algno de estos le agregué la posición con
top: 0; right: 0;
por ejemplo.

Creo haber agregado un position relative a los input contenedores. Es cosa de experimentar.