左側固定寬度div，右側填充剩餘寬度div

Question

我想要一個左側有固定寬度圖像的div和一個帶背景色的可變寬度div，它應該在我的設備上擴展其寬度100％。 我無法阻止第二個div溢出我的固定div。

當我添加溢出：隱藏在變量寬度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

嘗試從.header-right取出float:left和width:100% - 正確的div然後按要求行事。

請參閱this jsfiddle。