W3Schools Tryit Éditeur

<!DOCTYPE html>
<html lang="en">
<head>
<title>Modèle CSS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

body {
police: Arial, Helvetica, sans-serif;
}

/* Styliser l'en-tête */
.header {
couleur de fond: #f1f1f1;
padding: 30px;
text-align: center;
taille-de-police: 35px;
}

/* Créez trois colonnes inégales qui flottent les unes à côté des autres */
.column {
flottant: gauche;
padding: 10px;
hauteur: 300px; /* Devrait être supprimé. Seulement pour démonstration */
}

/* Colonne de gauche et colonne de droite */
.column.side {
largeur: 25%;
}

/* Colonne du milieu */
.column.middle {
largeur: 50%;
}

/* Effacer les flottants après les colonnes */
.row:after {
contenu: "";
afficher: table;
clair: les deux;
}

/* Styliser le pied de page */
.footer {
couleur-de-fond: #f1f1f1;
padding: 10px;
text-align: center;
}

/* Mise en page responsive - fait empiler les trois colonnes les unes sur les autres au lieu de les placer côte à côte */
@media (max-width: 600px) {
.column.side, .column.middle {
largeur: 100%;
}
}
</style>
</head>
<body>

<h2>Modèle CSS utilisant Float</h2>
<p>Dans cet exemple, nous avons créé un en-tête, trois colonnes inégales et un pied de page. Sur les écrans plus petits, les colonnes s'empileront les unes sur les autres.</p>
<p>Redimensionnez la fenêtre du navigateur pour voir l'effet réactif.</p>

<div class="row">
  <div class="column side" style="background-color:#aaa;">Colonne</div>
  <div class="column middle" style="background-color:#bbb;">Colonne</div>
  <div class="column side" style="background-color:#ccc;">Colonne</div>
</div>

</body>

</html>