左側の固定幅div、右側の残りの幅divを埋める

Question

左側に幅が固定された画像と背景色が設定された幅が可変のdivが必要です。これは、デバイス上で幅を100％拡張する必要があります。 2番目のdivが固定divからオーバーフローするのを止めることはできません。

Overflow：hiddenを可変幅の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は要求どおりに動作します。

this jsfiddle を参照してください。