Feste Breite div auf der linken, füllen verbleibende Breite div auf der rechten Seite

Question

Ich möchte ein div mit einer festen Breite Bild auf der linken Seite und eine variable Breite div mit einer Hintergrundfarbe, die seine Breite 100% auf meinem Gerät erweitern sollte. Ich kann das zweite div nicht davon abhalten, mein festes div zu überfließen.

Wenn ich Überlauf hinzufügen: Versteckt bei der variablen Breite Div springt es nur unter dem Foto, in der nächsten Zeile.

Wie kann ich das richtig beheben (d. H. Ohne Hacks oder Margin-left, da ich die Site später mit Medienabfragen reagieren muss und ich das Bild mit anderen Auflösungsbildern für jedes Gerät ändern muss)?

• Anfänger Web-Designer versucht, die Schrecken der ansprechenden Websites zu bekämpfen -

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

Versuchen Sie, die float:left und width:100% von .header-right entfernt - das Recht div verhält sich dann wie gewünscht.

Siehe this jsfiddle.