Fixe la largeur de la div sur la gauche, remplir restant de la largeur de la div sur la droite

Question

Je veux un div avec une largeur fixe de l'image sur la gauche et d'une partie variable de la largeur de div avec une couleur d'arrière-plan, qui devrait étendre sa largeur à 100% sur mon appareil. Je ne peux pas arrêter de la deuxième div débordement de mon fixe div.

Quand j'ajoute overflow:hidden à la variable de la largeur de la div, il saute juste sous la photo, sur la ligne suivante.

Comment puis-je résoudre ce problème de la bonne façon (c'est à dire sans hacks ou à la marge de gauche, car j'ai besoin de rendre le site responsive, plus tard, avec les media queries et j'ai du changer l'image avec d'autres images de résolution pour chaque appareil)?

• débutant concepteur de sites web d'essayer de lutter contre l'horreur de sites sensibles -

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

essayez d'enlever le float:left & width:100% à partir de .en-tête-droit - le droit div se comporte alors comme demandé.

jsfiddle ici: http://jsfiddle.net/8pk4K/