Quiero un div con una imagen de ancho fijo a la izquierda y un div de ancho variable con un color de fondo, que debería extender su ancho 100% en mi dispositivo. No puedo evitar que el segundo div desborde mi div fijo.

Cuando agrego el desbordamiento: oculto en el div de ancho variable, simplemente salta debajo de la foto, en la siguiente fila.

¿Cómo puedo solucionar esto de la manera correcta (es decir, sin cortes o margen izquierdo, ya que necesito hacer que el sitio responda más tarde con consultas de medios y tengo que cambiar la imagen con otras imágenes de resolución para cada dispositivo)?

diseñador web principiante que intenta hacer frente al horror de los sitios web receptivos -

HTML:

<div class="header"></div>
<div class="header-right"></div>

CSS:

.header{
    float:left;
    background-image: url('img/header.png');
    background-repeat: no-repeat;
    width: 240px;
    height: 100px;
    }

.header-right{
    float:left; 
    overflow:hidden; 
    background-color:#000;
    width: 100%;
    height: 100px;
    }