Diviser Div en 2 colonnes à L'aide de CSS

ça me fait du bien. 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 de l'élément de croître pour s'adapter à flottait éléments.

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

le moyen Le plus souple pour ce faire:

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

c'est exactement la même chose que d'ajouter l'élément à #content:

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

mais sans ajouter d'élément. ::après est appelé un pseudo-élément. La seule raison pour laquelle c'est mieux que d'ajouter overflow:hidden; au contenu #est que vous pouvez avoir des éléments enfant absolument positionnés débordant et toujours être visible. De plus, il permettra à box-shadow d'être encore visible.

quelle que soit la raison pour laquelle je n'ai jamais aimé les approches de dégagement, je me fie aux flotteurs et aux largeurs en pourcentage pour des choses comme ça.

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 un peu de contenu dans 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

Faire des enfants divs inline-block et ils seront en position côte à côte:

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

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

Voir Demo

meilleure façon de diviser une div verticalement --

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

la meilleure réponse est ici Question 211383

de nos jours, toute personne qui se respecte doit utiliser l'approche "micro-clearfix" indiquée pour dégager les flotteurs.

n'affectent pas le débit. Ce que j'ai tendance à faire est d'ajouter un

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

à la fin de " l'emballage 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 clearfix CSS:

#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 est pour la compatibilité entre navigateurs.

1. Faire de la police une taille égale à zéro dans le DIV parent.

2. Définir la largeur % pour chaque enfant DIVs.

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

*dans Safari vous pouvez avoir besoin de définir 49% pour faire cela fonctionne.

diviser une division en deux colonnes est très facile, il suffit de spécifier la largeur de votre colonne mieux si vous mettez ceci (comme la largeur:50%) et réglez le flotteur:gauche pour colonne de gauche et flotteur:droite pour colonne de droite.

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 ont en fait intégré 2 divs dans une seule div afin de simuler 2 colonnes. C'est une mauvaise idée parce que vous ne serez pas en mesure de flux de contenu dans les 2 colonnes de n'importe quelle manière dynamique.

donc, au lieu de ce qui précède, utilisez un div simple qui est défini pour contenir 2 colonnes utiliser CSS comme suit...

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

assignez ce qui précède comme une classe à un div, et il va réellement couler son contenu dans les 2 colonnes. Vous pouvez aller plus loin et de définir les écarts entre les marges. Selon le contenu de la div, vous pouvez avoir besoin de jouer avec les valeurs de rupture de mot pour que votre contenu ne soit pas découpé entre les colonnes.

je sais que ce post est vieux, mais si l'un d'entre vous cherche toujours une solution plus simple.

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

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