Colocar dos imágenes a la misma altura usando estilos y html

Diseñando una barra corporativa para una página web me he encontrado con una tarea que me ha llevado un rato hasta que he caido en la solución. La anoto aquí por si le es de utilidad a alguien. Se trata de colocar una barra que crezca o decrezca al cambiar el tamaño de la pantalla manteniendo en su parte izquierda un logotipo y otro en la parte derecha.

Esto es lo que buscabamos hacer:


Al redimensionar la pantalla, el espacio se reduce también y no se nota ningún salto.

La edición de las imágenes se basa en tomar los dos logos por un lado y luego una imagen que hace de fondo a lo largo del resto de la barra, con un degradado de color vertical.

Y a la hora de montarlo en HTML utilizaríamos algunos div para recogerlos:

<div id="ja-preheader">
<div id="ja-preheader_inner_left"></div>
<div id="ja-preheader_inner_right"></div>
</div>

El primer div tendrá como fondo la imagen que se va a repetir, mientras que los otros dos div tendrán cada uno el logo correspondiente.

Los estilos que hacen que funcionen son los siguientes:

#preheader {
    display: block;
    background: url(../images/ce_top_bar_back.png) repeat-x top right;
    height: 67px;
    position: relative;
    top: 0;
}

#preheader_inner_left {
    background: url(../images/ce_top_bar_01.png) no-repeat top left;
    height: 67px;
    width:260px;
    top: 0;
    left:1;
    float:left;
}

#preheader_inner_right {
    background: url(../images/ce_top_bar_02.png) no-repeat top right;
    height: 67px;
    width: 290px;
    top: 0;
    float:right;
}

La conclusión es que el truco para que funcione consiste en asignarle un ancho fijo a cada uno de los div interiores y utilizar la propiedad float para colocar cada logo en su sitio.

Y después de montar este circo uno podría pensar ¿no habrías acabado antes con una tablita? Y eso daría para un largísimo debate, pero en resumen se trata de hacer páginas web modernas, usables y accesibles.