posicionar div .error de jquery validation

En mi formulario de login con jquery validation los mensajes de error se muestran a la derecha del input text donde se da el error.
El mensaje de error se muestra en un div flotante.
pero el problema es:
No he logrado que el texto salga en una sola fila, siempre el div se me ajusta al minimo (el ancho de una palabra).
Como hago para que el div se ajuste al texto del mensaje de error?

codigo js:

Código Javascript :

$(document).ready(function(){
        $("#loginform").validate({
            rules: {
                "user": {
                    required: true,
                    min: 5
                }
                "pass": {
                    required: true,
                    min: 5
                }
            },
            errorElement: "div" // This is to override the label w/ a div
        });                     
    });

Codigo css:

Código CSS :

div.error{
     margin-top:-12px;
     margin-left:150px;
     background:white;
     border: 1px solid #ccc;
     position:absolute;
     z-index:100;
}

Codigo HTML:

Código HTML :

<div id="boxform"><!--Es un div centrado con position:absolute--> 
<form id="loginform" type="post" action="/user/login">
         <input id="user" type="text" name="user"/>
         <input id="pass" type="text" name="pass"/>
         <input id="submit" type="submit" value="entrar" name="submit"/>
</form>
</div>

espero que entiendas cual es el problema y pregunta si no entiendes
Gracias!!

por que no le pones un ancho al div ese
ponele width:300px o lo q sea hasta q se ajuste. y tmb
trata de usar posicion relativa y usar top y left, sin margin.

skaterseba escribió:

Ya lo había probado pero no queda completamente bien porque los mensajes son dinámicos.
Si le pongo 300px de width en algunos mensajes me sobra espacio y yo quiero hacerlo bien.

ponele una clase a cada DIV y cada div cn un ancho distinto jejeje.