Division en deux colonnes à l'aide de CSS

Question

J'ai essayé de scinder une div en deux colonnes à l'aide de 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 droit et gauche à leurs positions respectives (droite et gauche), il semble ignorer la couleur d'arrière-plan de la div de contenu. Et les autres codes que j'ai essayés sur différents sites Web ne semblent pas pouvoir être traduits dans ma structure.

Merci pour toute aide!

Answer 1

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>
 

Answer 2

Lorsque vous flottez ces deux divs, le contenu div se réduit à une hauteur nulle. Il suffit d'ajouter

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

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

Answer 3

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

débordement: hidden fera que l'élément s'agrandisse pour s'intégrer aux éléments flottants.

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

Answer 4

La manière la plus flexible de faire ceci:

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

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

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

mais sans ajouter réellement un élément. :: after est appelé un pseudo-élément. La seule raison pour laquelle il vaut mieux que d'ajouter overflow:hidden; à #content est que vous pouvez avoir un débordement d'éléments enfants positionnés de manière absolue tout en restant visible. Cela permettra également à l'ombre de la boîte d'être toujours visible.