30 votes

Comment faire en sorte que la div du milieu remplisse l'espace entre les éléments flottants ?

J'ai trois éléments div : gauche, milieu et droit. La gauche et la droite sont fixes et en flottant. Ce que je veux, c'est que le div du milieu remplisse l'espace entre eux.

Voici mon code :

<!DOCTYPE html>
<html>
<head>
   <style>
      * {border: dashed 1px red;}
      #left {
         width: 200px;
         float: left;
      }
      #middle {
         float: left;
      }
      #right {
         width: 200px;
         float: right;
      }
   </style>
</head>
<body>
   <div id="left"  >  gauche   </div>
   <div id="middle">  milieu </div>
   <div id="right" >  droit  </div>
</body>
</html>

Des idées sur la façon de faire cela? J'ai essayé différentes solutions mais je n'ai pas réussi à obtenir ce que je veux.

76voto

ScottS Points 37738

La clé est de restructurer votre html pour avoir middle en dernier, de supprimer le float du middle et de le remplacer par overflow: hidden.

Voir exemple jsfiddle.

HTML

  gauche  
  droite  
  milieu 

CSS

#left {
    width: 200px;
    float: left;
}
#middle {
    overflow: hidden;
}
#right {
    width: 200px;
    float: right;
}

3voto

djthoms Points 1004

J'ai pu reproduire le problème et le corriger en utilisant des pourcentages au lieu de valeurs absolues. Puisque vous recherchez quelque chose de flexible entre les deux éléments, cela devrait fonctionner.

#left {
    width: 20%;
    float: left;
    background: #ccc;
}
#middle {
    width: 60%;
    float: left;
    display: block;
    background: #ddd;
}
#right {
    width: 20%;
    float: right;
    background: #bbb;
} 

Voici une démonstration

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X