Я хочу, чтобы div с изображением фиксированной ширины слева и div переменной ширины с цветом фона, который должен увеличить его ширину на 100% на моем устройстве. Я не могу остановить переполнение второго div моего фиксированного div.

Когда я добавляю переполнение: скрытый в переменной ширине div, он просто прыгает под фотографией в следующем ряду.

Как я могу исправить это правильно (то есть без взлома или оставления на полях, так как мне нужно, чтобы сайт позже реагировал на медиа-запросы и мне приходилось менять изображение с изображениями с другим разрешением для каждого устройства)?

beginner web designer trying to tackle the horror of responsive websites -

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