Fixed width div on left, fill remaining width div on right

Question

I want a div with a fixed width image on the left and a variable width div with a background color, which should extend its width 100% on my device. I can't stop the second div from overflowing my fixed div.

When I add overflow:hidden at the variable width div it just jumps under the photo, on the next row.

How can I fix this the right way (i.e. without hacks or margin-left, since I need to make the site responsive later with media queries and I have to change the image with other resolution images for each device)?

• beginner web designer trying to tackle the horror of responsive websites -

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

Try removing the float:left and width:100% from .header-right — the right div then behaves as requested.

.header {    float: left;    background: #efefef;    background-repeat: no-repeat;    width: 240px;    height: 100px;  }    .header-right {    overflow: hidden;     background-color: #000;    height: 100px;  }

<div class="header"></div>  <div class="header-right"></div>