Div ancho fijo a la izquierda, relleno ancho restante div a la derecha

Question

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

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

¿Cómo puedo solucionar esto de la manera correcta (es decir, sin hacks o margin-left, 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)?

• principiante diseñador de páginas web que intenta abordar el horror de sitios web que responden -

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; 
    } 

Answer 1

Retire el float:left y width:100% de .header-right - el derecho div luego se comporta según lo solicitado.

Ver this jsfiddle.