Ustalona szerokość div po lewej stronie, wypełnienie pozostałej szerokości div po prawej

Question

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ć jego szerokość o 100% na moje urządzenie. Nie mogę zatrzymać drugiego div od przepełnienia mojego stałego div.

Po dodaniu przepełnienia: ukryty przy zmiennej szerokości div przeskakuje pod zdjęciem, w następnym wierszu.

Jak mogę to naprawić we właściwy sposób (tzn. Bez hacków lub marginesów z lewej strony, ponieważ muszę sprawić, że witryna będzie reagować później za pomocą zapytań o media i muszę zmienić obraz z innymi obrazami rozdzielczości dla każdego urządzenia)?

• Początkujący web designer próbują rozwiązać grozę reagujących na stronach 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; 
    } 

Answer 1

Spróbuj usunąć float:left i width:100% z .header-right - prawo div następnie zachowuje się zgodnie z żądaniem.

Zobacz this jsfiddle.