左侧固定宽度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。