Div di larghezza fissa a sinistra, riempire il div di larghezza rimanente a destra

Question

Voglio un div con un'immagine a larghezza fissa a sinistra e un div variabile in larghezza con un colore di sfondo, che dovrebbe estendersi della sua larghezza 100% sul mio dispositivo. Non riesco a fermare il secondo div da traboccare il mio div fisso.

Quando aggiungo overflow: nascosto alla larghezza variabile div salta appena sotto la foto, nella riga successiva.

Come posso risolvere il problema nel modo giusto (vale a dire senza hack o margine sinistro, poiché è necessario rendere il sito più reattivo in seguito con le query multimediali e devo modificare l'immagine con altre immagini di risoluzione per ciascun dispositivo)?

• principiante web designer cercare di affrontare l'orrore di siti sensibili -

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

Provare a rimuovere il float:left e width:100% da .header-right - la destra div quindi si comporta come richiesto.

Vedere this jsfiddle.