Cabecera elástica.

[eltransito]

Hola. Al grano:

Estoy modificando una platilla y tengo un problema con el header. He dividido la imagen que lo constituye en tres para que pueda ser elástico y que al minimizar la pantallas se contraiga. Está aquí:

http://paspespuyas.com/comunidad/index.php/a

Funciona hasta que el div de la izquierda se topa con el de la derecha entonces este baja como podrán ver, se monta y el efecto es horroroso(para eso es mejor que no sea elástico). No doy con la solución a ver si me pueden echar una mano. Les dejo el código de los div. Que constituyen el header. Gracias por anticipado.

Código HTML:

#header {
	margin: 20px 20px 0px 20px;
	padding: 0px;
	border: 0px;
	background-image: url(paspescom_2.gif);
	background-repeat: repeat-x;
            width: auto;
            height: 137px;
	voice-family: "\"}\"";
	voice-family:inherit;  
	}   
#senora{
	background-image: url(paspescom_1.gif);
           background-repeat: no-repeat;
          float: left;
         margin: 0px;
         padding: 0px;
          width: 526px;
        height: 137px;
}
#rotulo{
           background-image: url(paspescom_3.gif);
	background-repeat: no-repeat;
	float: right;
	margin: 0px;
	padding: 0px;
	width: 174px;
	height: 137px;
	
}

Y luego en el html:

Código HTML:

<div id="header">
  <div id="senora"></div>
  <div id="rotulo"></div>
  
  </div>