Comment positionner des DIV côte à côte en HTML et CSS ?
Comment faire pour positionner des balises HTML <div> côte à côte, en HTML et CSS ?
La solution la plus récente pour positionner des balises <div> côte à côte est d'utiliser les propriétés CSS flex et display qui permettent de rendre flexible les balises <div> que vous mettez côte à côte.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Comment positionner des DIV côte à côte en HTML et CSS ?</title>
<style>
.conteneur{
display: flex;
}
.flex{
flex-grow: 1;
}
</style>
</head>
<body>
<div class="conteneur">
<div class="flex">un</div>
<div class="flex">deux</div>
<div class="flex">trois</div>
</div>
</body>
</html>
Référez-vous aux propriétés CSS flex-basis, flex-grow et flex-shrink, via cette page, pour contrôler la taille des balises <div> qui sont positionnées l'une à coté des autres.
Une autre solution pour mettre des balises DIV côte à côte consiste à utiliser les propriétés CSS display et float. Vous pouvez ainsi positionner les <div> de gauche et de droite avec les valeurs float:left; et float:right;. Pour la balise <div> du milieu il vous faudra utiliser display:inline-block;.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Comment positionner des DIV côte à côte en HTML et CSS ?</title>
<style>
.gauche{
float: left;
width:25%
}
.milieu{
display: inline-block;
width:50%
}
.droite{
float: right;
width:25%
}
</style>
</head>
<body>
<div class="conteneur">
<div class="gauche">un</div>
<div class="milieu">deux</div>
<div class="droite">trois</div>
</div>
</body>
</html>
Remarque : à la différence de flex qui étire automatiquement les <div>, il vous faudra ici spécifier la longueur des balises <div> (width:25%).