web-dev-qa-db-fra.com

Largeur fixe div à gauche, remplir la largeur restante à droite

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

Lorsque j'ajoute un débordement: caché à la largeur variable 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 marge gauche, car je dois rendre le site réactif plus tard avec les requêtes multimédias et je dois changer l'image avec d'autres images de résolution pour chaque appareil)?

  • concepteur de sites Web débutant essayant de lutter contre l'horreur des sites Web réactifs -

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;
    }
csscss-floatoverflowfixed-widthvariable-width
50
Anamaria Miehs

Essayez de supprimer le float:left et width:100% de .header-right - la droite div se comporte alors comme demandé.

Voir ce jsfiddle .

55
caitriona