왼쪽에 고정 너비 div, 오른쪽에 남은 너비 div

Question

왼쪽에 고정 너비 이미지가있는 div와 내 장치에서 너비가 100 % 확장되어야하는 배경색이있는 가변 너비 div가 필요합니다. 두 번째 div가 고정 div를 넘칠 수 없습니다.

변수 폭 div에 오버플로 : hidden을 추가하면 다음 행의 사진 아래로 바로 이동합니다.

나중에 미디어 쿼리로 응답하도록 사이트를 구성해야하고 각 장치의 다른 해상도 이미지로 이미지를 변경해야하므로 해킹이나 여백이 남지 않게하려면 어떻게해야합니까? 반응 웹 사이트의 공포를 해결하기 위해 노력하고

• 초급 웹 디자이너 -

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을 참조하십시오.