Stała szerokość div po lewej, wypełnij pozostałą szerokość div po prawej

Chcę div z obrazem o stałej szerokości po lewej stronie i div o zmiennej szerokości z kolorem tła, który powinien rozszerzyć swoją szerokość o 100% na moim urządzeniu. Nie mogę powstrzymać drugiego div przed przepełnieniem mojego stałego div.

Kiedy dodam overflow: hidden w zmiennej szerokości div to po prostu przeskakuje pod zdjęciem, w następnym wierszu.

Jak mogę to naprawić we właściwy sposób (tj. bez hacków lub marginesu w lewo, ponieważ muszę sprawić, aby Strona reagowała później z zapytaniami o media i muszę zmienić obraz z innymi obrazami rozdzielczości dla każdego urządzenia)?

• początkujący projektant stron internetowych próbuje zmierzyć się z horrorem responsywnych stron internetowych -

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