CSS 2 div côte à côte - CSS

Introduction

Dans le développement web, il est parfois nécessaire de positionner deux éléments <div> côte à côte. Cela peut être utile pour créer des mises en page flexibles ou organiser le contenu de manière spécifique. En utilisant CSS, il est possible de réaliser cette mise en page en utilisant différentes techniques.

Dans cet article, nous allons explorer quelques méthodes courantes pour positionner deux divs côte à côte en utilisant CSS.

Méthode 1: Float

La méthode de flottaison est l'une des techniques les plus anciennes pour positionner des éléments côte à côte. Voici comment il fonctionne :

.container {
  width: 100%;
}

.container::after {
  content: "";
  display: table;
  clear: both;
}

.left {
  float: left;
  width: 50%;
}

.right {
  float: right;
  width: 50%;
}

Explication du code :

• La classe .container est utilisée pour envelopper les deux divs.
• .container::after est utilisée pour effacer les floats et garantir que .container a une hauteur correcte.
• .left et .right sont les classes utilisées pour définir les styles des divs individuels. Dans cet exemple, nous avons défini la largeur de chaque div à 50%, ce qui les mettra côte à côte.

Méthode 2: Flexbox

Flexbox est une autre méthode couramment utilisée pour la mise en page en CSS. Voici comment positionner deux divs côte à côte en utilisant Flexbox :

.container {
  display: flex;
}

.left {
  flex: 1;
}

.right {
  flex: 1;
}

Explication du code :

• La classe .container est utilisée pour envelopper les deux divs et définir display: flex, ce qui active Flexbox.
• .left et .right sont les classes utilisées pour définir les styles des divs individuels. En utilisant flex: 1, chaque div occupera la même quantité d'espace disponible, ce qui les mettra côte à côte.

Méthode 3: Grid

CSS Grid est une technique de positionnement puissante qui permet de créer des mises en page complexes. Voici comment utiliser CSS Grid pour positionner deux divs côte à côte :

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.left {
  grid-column: 1;
}

.right {
  grid-column: 2;
}

Explication du code :

• La classe .container est utilisée pour envelopper les deux divs et définir display: grid, ce qui active CSS Grid.
• grid-template-columns: 1fr 1fr définit deux colonnes de largeur équivalente pour les divs.
• .left et .right sont les classes utilisées pour définir les styles des divs individuels. En utilisant grid-column, nous spécifions dans quelle colonne chaque div doit être placé.

Conclusion

Positionner deux divs côte à côte en utilisant CSS peut être réalisé de différentes manières. Les trois méthodes présentées ici - Float, Flexbox et Grid - offrent différentes approches pour atteindre cet objectif. Il est recommandé de choisir la technique qui convient le mieux à vos besoins spécifiques en matière de mise en page.