Фиксированная ширина div слева, заполните оставшуюся ширину div справа

Question

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

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

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

• начинающий веб-дизайнер пытается справиться с ужасом адаптивных сайтов -

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

Попробуйте удалить float:left а также width:100% от .header-right - право div затем ведет себя как требуется.

Смотрите это jsfiddle.

Answer 2

С использованием css grid ты можешь добиться этого легче

• вам нужно обернуть эти div в оболочку, скажем, parent
• дайте .parent display: grid
• дайте grid-template-areas в .parent а также grid-area в обоих children
• нет необходимости использовать float: left в обоих children отрегулируйте ширину левого div, используя grid-template-columns в .parent

.parent {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header-left header-right";
}
.header {
    background-image: url(img/header.png);
    background-color: #ebebeb;
    background-repeat: no-repeat;
    height: 100px;
    grid-area: header-left;
}

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

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

css стал намного более продвинутым и отвечает с помощью этого продвинутого css, только если он может быть кому-то полезен:)