Mettre deux div côte à côte proprement dépend moins d’un “truc” magique que du bon modèle CSS. En pratique, Flexbox suffit souvent pour une rangée simple, tandis que Grid devient plus lisible dès qu’il faut gérer des colonnes, des écarts réguliers ou une structure un peu plus riche. Je vais te montrer les méthodes utiles, les cas où chacune a du sens, et les erreurs qui cassent encore les mises en page sur mobile.
Les points à garder en tête avant de toucher au CSS
- Flexbox est la solution la plus directe pour deux blocs alignés sur une seule ligne.
- Grid est plus propre si tu veux des colonnes nettes et une logique de page plus structurée.
- Float fonctionne encore, mais je ne le choisirais pas pour une mise en page neuve.
- Le style doit être appliqué au conteneur parent, pas aux deux div de façon isolée.
- Sur mobile, il faut souvent passer en colonne plutôt que forcer deux blocs trop serrés.
Pourquoi la méthode CSS compte plus que le simple alignement
Par défaut, deux div se comportent comme des blocs et s’empilent l’un sous l’autre. Pour les placer côte à côte, je ne cherche pas à “forcer” leur position, je choisis un système de mise en page adapté à ce que la section doit faire vraiment. C’est ce point qui change tout : une ligne de deux cartes, une colonne de texte et une barre latérale, ou une grille plus large ne se traitent pas de la même manière.
Si tu veux aller vite, voici le bon réflexe : Flexbox pour une ligne simple, Grid pour une structure en colonnes plus nette, et float seulement pour un vieux code à maintenir. Cette hiérarchie évite beaucoup de bricolage inutile et rend le CSS plus stable à long terme.
| Méthode | Quand l’utiliser | Atout principal | Limite |
|---|---|---|---|
| Flexbox | Deux blocs, une rangée, une carte à gauche et une carte à droite | Rapide, lisible, très pratique pour répartir l’espace | Moins naturel dès que la section devient une vraie grille |
| Grid | Colonnes de page, panneaux alignés, largeur précise | Contrôle plus fin sur les colonnes et les écarts | Un peu plus verbeux si tu veux juste deux blocs simples |
| Float | Maintenance d’un ancien template | Peut dépanner sur du code hérité | Fragile, moins propre, pas idéal pour un projet neuf |
En pratique, je pars donc du principe qu’il faut d’abord choisir le bon modèle de layout, puis seulement ajuster l’alignement. C’est là que Flexbox devient intéressant pour un cas simple.
La solution la plus simple avec Flexbox
Flexbox est mon premier choix quand il s’agit de mettre deux blocs sur une même ligne sans construire une usine à gaz. Il suffit d’appliquer display: flex au parent, et les enfants deviennent des flex items, c’est-à-dire des éléments que le navigateur sait répartir sur un axe horizontal ou vertical. Pour deux div, c’est généralement le meilleur compromis entre simplicité et contrôle.
Bloc 1
Bloc 2
* {
box-sizing: border-box;
}
.row {
display: flex;
gap: 1rem;
}
.col {
flex: 1;
min-width: 0;
padding: 1rem;
border-radius: 12px;
background: #f5f7fa;
}
@media (max-width: 768px) {
.row {
flex-direction: column;
}
}Le point important ici, c’est flex: 1 : les deux colonnes partagent l’espace disponible de manière égale. J’ajoute souvent min-width: 0 parce qu’il évite qu’un contenu trop long casse la largeur du bloc, surtout si tu affiches du texte technique, des URLs ou des noms de fichiers. Et pour l’écart entre les colonnes, gap est plus propre que de bricoler des marges à droite et à gauche.
Si tu veux une colonne plus large que l’autre, tu peux simplement passer à flex: 2 pour le premier bloc et flex: 1 pour le second. C’est une bonne solution quand la hiérarchie visuelle compte, par exemple un panneau principal avec un encart secondaire. Quand la structure devient plus régulière ou plus complexe, Grid prend souvent le relais avec plus de clarté.
Quand Grid devient plus propre
Grid est plus intéressant dès que tu raisonnes en colonnes plutôt qu’en simple ligne d’éléments. Pour un duo de blocs, il permet de définir très clairement deux pistes de largeur égale ou inégale, sans dépendre de calculs implicites. Je le privilégie dès que la section fait partie d’une page plus structurée, comme une zone d’accueil, un dashboard, une fiche produit ou un bloc éditorial avec visuel et texte.
.row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.row.asymmetric {
grid-template-columns: 2fr 1fr;
}Ici, fr signifie une fraction de l’espace libre du conteneur. Avec repeat(2, minmax(0, 1fr)), les deux colonnes partagent l’espace de façon équilibrée tout en restant capables de rétrécir proprement. C’est une formulation que j’aime bien parce qu’elle évite plusieurs cas de débordement qu’on voit souvent quand on dimensionne les blocs trop brutalement.
La différence avec Flexbox est subtile mais importante : Flexbox distribue une ligne, Grid organise une structure. Si tu sais déjà que la page va évoluer vers plusieurs zones alignées, plusieurs cartes ou des blocs qui doivent rester parfaitement synchronisés, Grid offre une base plus lisible. Une fois cette logique en place, il reste à rendre le tout solide sur les petits écrans.
Rendre la mise en page vraiment responsive
Le vrai test d’un alignement réussi, ce n’est pas l’écran du bureau, c’est le mobile. Deux colonnes qui paraissent parfaites en 1440 px peuvent devenir étroites, maladroites ou carrément illisibles à 375 px. Mon réflexe est simple : si le contenu a besoin d’air, je passe en colonne unique sous un certain seuil, souvent autour de 768 px, puis j’ajuste au besoin selon le contenu réel.
Je fais aussi attention à trois détails qui changent beaucoup de choses :
- Garder un ordre HTML logique pour que la lecture reste cohérente même si le CSS change.
- Éviter les largeurs fixes quand le contenu n’est pas totalement maîtrisé.
-
Autoriser les longues chaînes à se casser avec
overflow-wrap: anywhere;si besoin.
Si tu utilises Flexbox, le passage en colonne se fait avec flex-direction: column;. Si tu utilises Grid, tu peux basculer vers grid-template-columns: 1fr;. Dans les deux cas, l’idée reste la même : ne pas forcer une mise en page horizontale quand l’écran ne la supporte plus confortablement. C’est ce qui distingue un simple rendu “qui marche” d’une interface vraiment utilisable.
Les erreurs qui provoquent les débordements
Les problèmes les plus courants ne viennent pas du principe de mise en page lui-même, mais de petits détails de boîte CSS. Je les croise souvent dans des projets où l’on ajoute du padding, des bordures ou des marges sans recalculer l’espace total. Sur un duo de div, le moindre excès se voit tout de suite.
| Symptôme | Cause probable | Correctif utile |
|---|---|---|
| Les deux blocs dépassent du conteneur | Largeur + padding + bordure calculés sans border-box
|
Utiliser box-sizing: border-box;
|
| Un bloc passe à la ligne sans raison apparente | Largeur trop serrée ou marge trop agressive | Remplacer les marges par gap et relâcher les largeurs fixes |
| Le texte “pousse” la colonne | Mot très long, URL, chaîne technique | Ajouter min-width: 0; et, si besoin, overflow-wrap: anywhere;
|
| La mise en page devient instable avec du vieux code | Utilisation de float sans nettoyage correct |
Passer à Flexbox ou Grid, ou a minima gérer le flux avec prudence |
Je garde aussi un œil sur la propriété order quand je travaille avec Flexbox ou Grid. Elle peut être pratique pour ajuster l’affichage visuel, mais je l’utilise avec retenue, parce qu’elle peut brouiller la logique de lecture si l’ordre affiché s’éloigne trop de l’ordre du HTML. Une bonne mise en page doit rester lisible, pas seulement jolie.
Le choix que je fais selon le contexte du projet
Si je pars de zéro et qu’il s’agit simplement de mettre deux blocs côte à côte, je commence presque toujours par Flexbox. C’est la voie la plus courte, la plus lisible et celle qui demande le moins d’ajustements pour une structure en ligne unique. Dès que la page réclame une logique de colonnes plus nette, ou qu’elle doit s’intégrer dans un ensemble plus vaste, je bascule volontiers vers Grid.
- Flexbox si tu veux une rangée simple, rapide à mettre en place, avec un contrôle clair sur la largeur des deux blocs.
- Grid si la section ressemble déjà à une petite architecture de page ou si tu veux un alignement plus strict.
- Float seulement si tu corriges un ancien site et que tu n’as pas le droit de réécrire le CSS autour.
Au fond, la bonne réponse n’est pas “quelle propriété marche”, mais “quelle propriété reste lisible quand le contenu change”. C’est ce critère qui fait la différence entre un effet visuel fragile et une mise en page durable. Si tu veux un conseil simple à retenir, je le résume ainsi : commence par Flexbox, passe à Grid si la structure grandit, et garde le HTML dans un ordre logique pour que ton layout reste solide sur desktop comme sur mobile.
