Comment faire en sorte qu'une div remplisse un espace horizontal restant ?

Question

J'ai 2 divs : une dans la partie gauche et une dans la partie droite de ma page. Celle de gauche a une largeur fixe et je veux que celle de droite remplisse l'espace restant.

#search {
  width: 160px;
  height: 25px;
  float: left;
  background-color: #ffffff;
}

#navigation {
  width: 780px;
  float: left;
  background-color: #A53030;
}

<div id="search">Text</div>
<div id="navigation">Navigation</div>

Answer 1

Le problème que j'ai trouvé avec la réponse de Boushley est que si la colonne de droite est plus longue que la colonne de gauche, elle s'enroulera autour de la colonne de gauche et recommencera à remplir tout l'espace. Ce n'est pas le comportement que je recherchais. Après avoir cherché de nombreuses "solutions", j'ai trouvé un tutoriel (dont le lien est mort) sur la création de pages à trois colonnes.

L'auteur propose trois méthodes différentes, une à largeur fixe, une avec trois colonnes variables et une avec des colonnes extérieures fixes et une largeur variable au milieu. Beaucoup plus élégant et efficace que les autres exemples que j'ai trouvés. A considérablement amélioré ma compréhension de la mise en page CSS.

En fait, dans le cas simple ci-dessus, la première colonne doit être flottante à gauche et sa largeur doit être fixe. Ensuite, donnez à la colonne de droite une marge gauche un peu plus large que celle de la première colonne. C'est tout. C'est fait. Le code d'Ala Boushley :

Voici une démonstration en Bases de données & jsFiddle

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}

<div id="left">  left  </div>
<div id="right"> right </div>

Dans l'exemple de Boushley, la colonne de gauche tient l'autre colonne à droite. Dès que la colonne de gauche se termine, la colonne de droite recommence à remplir tout l'espace. Ici, la colonne de droite s'aligne simplement plus loin dans la page et la colonne de gauche occupe sa grande marge. Aucune interaction de flux n'est nécessaire.

Answer 2

La solution vient de la propriété "display".

En fait, vous devez faire en sorte que les deux divs agissent comme des cellules de tableau. Ainsi, au lieu d'utiliser float:left vous devrez utiliser display:table-cell sur les deux divs, et pour la div de largeur dynamique, vous devez définir width:auto; également. Les deux divs doivent être placées dans un conteneur de 100% de largeur avec la balise display:table propriété.

Voici la css :

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

Et le HTML :

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

IMPORTANT : Pour Internet Explorer, vous devez spécifier la propriété float sur la div de largeur dynamique, sinon l'espace ne sera pas rempli.

J'espère que cela résoudra votre problème. Si vous le souhaitez, vous pouvez lire l'article complet que j'ai écrit à ce sujet sur mon blog .

Answer 3

Comme il s'agit d'une question plutôt populaire, j'ai envie de partager une solution intéressante utilisant BFC.
Exemple de Codepen aquí .

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

En l'occurrence, overflow: auto déclenche un comportement contextuel et fait en sorte que le bon élément s'étende sólo à la largeur restante disponible et il s'étendra naturellement à la pleine largeur si .left disparaît. Une astuce très utile et propre pour de nombreuses mises en page d'interface utilisateur, mais peut-être difficile à comprendre au premier abord.

Answer 4

Cela semble répondre à votre objectif.

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}

<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>

Answer 5

La réponse de @Boushley était la plus proche, mais il y a un problème qui n'a pas été abordé et qui a été souligné. Il y a cependant un problème qui n'a pas été abordé et qui a été souligné. droit prend toute la largeur du navigateur ; le contenu prend la largeur prévue. Pour mieux comprendre ce problème :

<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>

http://jsfiddle.net/79hpS/

Le contenu est à la bonne place (dans Firefox), mais la largeur est incorrecte. Lorsque les éléments enfants commencent à hériter de la largeur (par exemple, le tableau avec width: 100% ), elles ont une largeur égale à celle du navigateur, ce qui les fait déborder sur la droite de la page et crée une barre de défilement horizontale (dans Firefox) ou ne pas flotter et être repoussées vers le bas (dans chrome).

Vous pouvez corriger cela facilement en ajoutant overflow: hidden dans la colonne de droite. Vous obtiendrez ainsi une largeur correcte pour le contenu et la div. En outre, le tableau recevra la largeur correcte et remplira la largeur restante disponible.

J'ai essayé certaines des autres solutions ci-dessus, mais elles ne fonctionnaient pas complètement dans certains cas et étaient tout simplement trop compliquées pour justifier de les corriger. Cette solution fonctionne et elle est simple.

Si vous avez des problèmes ou des préoccupations, n'hésitez pas à les soulever.