Ich möchte ein Div mit einem Bild mit fester Breite auf der linken Seite und ein Div mit variabler Breite und Hintergrundfarbe, dessen Breite auf meinem Gerät um 100% erweitert werden soll. Ich kann die zweite Div nicht davon abhalten, meine feste Div zu überfluten.

Wenn ich einen Überlauf hinzufüge, springt er, versteckt in der variablen Breite div, in der nächsten Zeile unter das Foto.

Wie kann ich dies auf die richtige Weise beheben (d. H. Ohne Hacks oder Rand-Links, da ich die Site später bei Medienabfragen reaktionsfähig machen muss und das Bild für jedes Gerät durch Bilder mit anderer Auflösung ändern muss)?

Anfänger-Webdesigner, der versucht, den Horror responsiver Websites in den Griff zu bekommen -

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