Diviser la division en 2 colonnes à l'aide de CSS

J'ai essayé de diviser un div en deux colonnes en utilisant CSS, mais je n'ai pas encore réussi à le faire fonctionner. Ma structure de base est la suivante:

<div id="content">
  <div id="left">
     <div id="object1"></div>
     <div id="object2"></div>
  </div>

  <div id="right">
     <div id="object3"></div>
     <div id="object4"></div>
  </div>
</div>

Si j'essaie de faire flotter les divs droite et gauche à leurs positions respectives (droite et gauche), il semble ignorer la couleur d'arrière-plan du div contenu. Et d'autres codes que j'ai essayés à partir de divers sites Web ne semblent pas pouvoir se traduire dans ma structure.

Merci pour toute aide!

Lorsque vous faites flotter ces deux divs, la div de contenu se réduit à une hauteur nulle. Il suffit d'ajouter

<br style="clear:both;"/>

après le #right div mais à l'intérieur du content div. Cela forcera la division de contenu à entourer les deux div internes flottants.

Cela fonctionne bien pour moi. J'ai divisé l'écran en deux moitiés: 20% et 80%:

<div style="width: 20%; float:left">
   #left content in here
</div>

<div style="width: 80%; float:right">
   #right content in there
</div>

Une autre façon de procéder consiste à ajouter overflow:hidden;à l'élément parent des éléments flottants.

overflow: hidden fera grossir l'élément pour s'adapter aux éléments flottants.

De cette façon, tout peut être fait en css plutôt que d'ajouter un autre élément html.

La manière la plus flexible de procéder:

#content::after {
  display:block;
  content:"";
  clear:both;
}

Cela revient exactement à ajouter l'élément à #content:

<br style="clear:both;"/>

mais sans ajouter réellement d'élément. :: after est appelé un pseudo élément. La seule raison pour laquelle cela est meilleur que l'ajout overflow:hidden;à #content est que vous pouvez avoir des éléments enfants positionnés en absolu débordant et être toujours visibles. En outre, cela permettra à la boîte-ombre d'être toujours visible.

Aucune des réponses données ne répond à la question initiale.

La question est de savoir comment séparer un div en 2 colonnes en utilisant css.

Toutes les réponses ci-dessus incorporent en fait 2 divs dans un seul div afin de simuler 2 colonnes. C'est une mauvaise idée car vous ne pourrez pas diffuser de contenu dans les 2 colonnes de manière dynamique.

Donc, au lieu de ce qui précède, utilisez un seul div défini pour contenir 2 colonnes en utilisant CSS comme suit ...

.two-column-div {
 column-count: 2;
}

assignez ce qui précède en tant que classe à un div, et il diffusera en fait son contenu dans les 2 colonnes. Vous pouvez aller plus loin et définir également les écarts entre les marges. En fonction du contenu de la div, vous devrez peut-être modifier les valeurs de saut de mot pour que votre contenu ne soit pas coupé entre les colonnes.

Pour une raison quelconque, je n'ai jamais aimé les approches de compensation, je compte sur des flotteurs et des largeurs en pourcentage pour des choses comme celle-ci.

Voici quelque chose qui fonctionne dans des cas simples:

#content { 
  overflow:auto; 
  width: 600px; 
  background: gray; 
} 

#left, #right { 
  width: 40%; 
  margin:5px; 
  padding: 1em; 
  background: white; 
} 

#left  { float:left;  }
#right { float:right; } 

Si vous mettez du contenu, vous verrez que cela fonctionne:

<div id="content">
  <div id="left">
     <div id="object1">some stuff</div>
     <div id="object2">some more stuff</div>
  </div>

  <div id="right">
     <div id="object3">unas cosas</div>
     <div id="object4">mas cosas para ti</div>
  </div>
</div>

Vous pouvez le voir ici: http://cssdesk.com/d64uy

Faites des divs enfants inline-blocket ils se positionneront côte à côte:

#content {
   width: 500px;
   height: 500px;
}

#left, #right {
    display: inline-block;
    width: 45%;
    height: 100%;
}

Voir la démo

Je sais que cet article est ancien, mais si l'un d'entre vous est toujours à la recherche d'une solution plus simple.

#container .left,
#container .right {
    display: inline-block;
}

#container .left {
    width: 20%;
    float: left;
}
#container .right {
    width: 80%;
    float: right;
}

Meilleur moyen de diviser un div verticalement -

#parent {
    margin: 0;
    width: 100%;
}
.left {
    float: left;
    width: 60%;
}
.right {
    overflow: hidden;
    width: 40%;
}

Vous pouvez utiliser flexbox pour contrôler la disposition de votre élément div:

* { box-sizing: border-box; }

#content {
  background-color: rgba(210, 210, 210, 0.5);
  border: 1px solid #000;
  padding: 0.5rem;
  display: flex;
}

#left,
#right {
  background-color: rgba(10, 10, 10, 0.5);
  border: 1px solid #fff;
  padding: 0.5rem;
  flex-grow: 1;
  color: #fff;
}

<div id="content">
  <div id="left">
     <div id="object1">lorem ipsum</div>
     <div id="object2">dolor site amet</div>
  </div>

  <div id="right">
     <div id="object3">lorem ipsum</div>
     <div id="object4">dolor site amet</div>
  </div>
</div>

Les flotteurs n'affectent pas le débit. J'ai tendance à ajouter un

<p class="extro" style="clear: both">possibly some content</p>

à la fin du 'wrapping div' (dans ce cas, le contenu). Je peux justifier cela sur une base sémantique en disant qu'un tel paragraphe pourrait être nécessaire. Une autre approche consiste à utiliser un CSS clearfix:

#content:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#content {
  display: inline-block;
}
/*  \*/
* html #content {
  height: 1%;
}

#content {
  display: block;
}
/*  */

La supercherie avec les commentaires concerne la compatibilité entre navigateurs.

La meilleure réponse à cette question est ici Question 211383

De nos jours, toute personne qui se respecte devrait utiliser l'approche dite «micro-clearfix» de défrichage des flotteurs.

1. Rendre la taille de la police égale à zéro dans la DIV parent.

2. Définissez le pourcentage de largeur pour chacun des DIV enfants.

   #content {
       font-size: 0;
   }
   
   #content > div {
       font-size: 16px;
       width: 50%;
   }

* Dans Safari, vous devrez peut-être définir 49% pour que cela fonctionne.

Diviser une division en deux colonnes est très simple, il suffit de spécifier la largeur de votre colonne mieux si vous mettez ceci (comme width: 50%) et définissez le float: left pour la colonne de gauche et float: right pour la colonne de droite.