Я хочу div с фиксированным размером изображения слева и переменной ширины div с цветом фона, который должен увеличивать его ширину на 100% на моем устройстве. Я не могу остановить второй div от переполнения моего фиксированного div.
Когда я добавляю переполнение: скрытый в переменной width 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;
}