Cố định chiều rộng div ở bên trái, điền div chiều rộng còn lại ở bên phải

Question

Tôi muốn một div có hình ảnh có chiều rộng cố định ở bên trái và div có chiều rộng thay đổi với màu nền, sẽ mở rộng chiều rộng 100% trên thiết bị của tôi. Tôi không thể dừng div thứ hai từ việc tràn div cố định của mình.

Khi tôi thêm tràn: ẩn ở độ rộng biến div nó chỉ nhảy dưới ảnh, trên hàng tiếp theo.

Làm cách nào để khắc phục điều này đúng cách (tức là không có hack hoặc lề trái vì tôi cần làm cho trang web đáp ứng sau với truy vấn phương tiện và tôi phải thay đổi hình ảnh với hình ảnh có độ phân giải khác cho từng thiết bị)?

• nhà thiết kế web mới bắt đầu cố gắng giải quyết sự khủng khiếp của các trang web đáp ứng -

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

Hãy thử loại bỏ các float:left và width:100% từ .header-right - bên phải div rồi hoạt động theo yêu cầu.

Xem this jsfiddle.