Diviser Div en 2 colonnes à l’aide de CSS

Lorsque vous flottez ces deux divs, le contenu div se réduit à une hauteur nulle. Ajoutez simplement

après le div #right mais à l’intérieur du div div. Cela forcera le contenu div à entourer les deux divs internes flottants.

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

 
 #left content in here 
 
 #right content in there  

Une autre façon de faire est d’append un overflow:hidden; à l’élément parent des éléments flottants.

débordement: caché fera croître l’élément pour s’adapter aux éléments flottants.

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

La manière la plus flexible de faire ceci:

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

Cela équivaut exactement à append l’élément à #content:

mais sans réellement append un élément. :: after est appelé un pseudo élément. La seule raison pour laquelle cela vaut mieux que d’append un overflow:hidden; to #content signifie que vous pouvez avoir des éléments enfants positionnés en absolu et être toujours visibles. De plus, cela permettra aux ombres de la boîte d’être toujours visibles.

Pour une raison quelconque, je n’ai jamais aimé les approches de nettoyage, je me fie aux flotteurs et aux largeurs de pourcentage pour des choses comme celles-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:

 
 
 
some stuff
 
some more stuff
 
 
 
unas cosas
 
mas cosas para ti
 
  

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

Faites en sorte que les enfants divisent inline-block et 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

Meilleur moyen de diviser une div verticalement –

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

C’est la meilleure réponse ici Question 211383

De nos jours, toute personne qui se respecte doit utiliser l’approche «micro-clearfix» énoncée pour la compensation des flottants.

Les flotteurs n’affectent pas le stream. Ce que j’ai tendance à faire est d’append un

 
possibly some content 

à la fin du «div wrapping» (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 clair:

 #content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #content { display: inline-block; } /* \*/ * html #content { height: 1%; } #content { display: block; } /* */ 

La ruse avec les commentaires est pour la compatibilité entre navigateurs.

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

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

    #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 si vous mettez ceci (comme la largeur: 50%) et réglez le flottant: gauche pour colonne gauche et flottant: droite pour colonne 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 intègrent en réalité 2 divs en un seul div afin de simuler 2 colonnes. C’est une mauvaise idée car vous ne pourrez pas transférer du contenu dans les 2 colonnes de manière dynamic.

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; } 

assigne ce qui précède en tant que classe à un div, et son contenu passera dans les deux colonnes. Vous pouvez également aller plus loin et définir des écarts entre les marges. En fonction du contenu du div, vous devrez peut-être modifier les valeurs des sauts de mots afin que votre contenu ne soit pas découpé entre les colonnes.

Je sais que cet article est ancien, mais si certains d’entre vous cherchent toujours une solution plus simple.

 #container .left, #container .right { display: inline-block; } #container .left { width: 20%; float: left; } #container .right { width: 80%; float: right; }