CSS deux divs l'un à côté de l'autre

Question

Je veux mettre deux <div> l'un à côté de l'autre. Le droit <div> est d'environ 200px ; et la gauche <div> doit remplir le reste de la largeur de l'écran ? Comment puis-je faire cela ?

Answer 1

Vous pouvez utiliser flexbox pour disposer vos articles :

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Il ne s'agit là que d'une première approche de la flexbox. Flexbox peut faire des choses assez étonnantes.

---

Pour les navigateurs plus anciens, vous pouvez utiliser les CSS float et un largeur pour le résoudre.

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Answer 2

Je ne sais pas si ce problème est toujours d'actualité ou non, mais je viens de rencontrer le même problème et j'ai utilisé le CSS display: inline-block; étiquette. Enveloppez-les dans un div afin qu'ils puissent être positionnés de manière appropriée.

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

Notez que l'utilisation de l'attribut de style en ligne n'a été utilisée que pour la brièveté de cet exemple ; bien entendu, ces attributs peuvent être déplacés vers un fichier CSS externe.

Answer 3

Malheureusement, ce n'est pas une chose triviale à résoudre pour le cas général. La solution la plus simple serait d'ajouter une propriété de style css "float : right ;" à votre div de 200px, mais cela aurait pour conséquence que votre div "principale" serait en fait pleine largeur et que tout texte qui s'y trouverait flotterait autour du bord de la div de 200px, ce qui a souvent l'air bizarre, selon le contenu (à peu près dans tous les cas, sauf s'il s'agit d'une image flottante).

EDIT : Comme l'a suggéré Dom, le problème de l'emballage pourrait bien sûr être résolu avec une marge. Je suis stupide.

Answer 4

La méthode suggérée par @roe et @MohitNanda fonctionne, mais si le div de droite est défini en tant que float:right; alors il doit être placé en premier dans la source HTML. Cela rompt l'ordre de lecture de gauche à droite, ce qui peut prêter à confusion si la page est affichée avec les styles désactivés. Dans ce cas, il peut être préférable d'utiliser un div enveloppant et un positionnement absolu :

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

Démontré :

gauche droite

Edit : Hmm, intéressant. La fenêtre d'aperçu affiche les divs correctement formatés, mais pas l'article rendu. Désolé alors, vous devrez l'essayer par vous-même.

Answer 5

div1 {
    float: right;
} 
div2 {
    float: left;
}

Cela fonctionnera correctement tant que vous définissez clear: both pour l'élément qui sépare ce bloc de deux colonnes.