Pour aborder le thème du flux, nous allons prendre l'exemple d'une mise en page sur trois colonnes, redimensionnables en fonction du navigateur.
Pour réaliser 3 colonnes (qui sont en faites des blocs), le contenu de la page est distribué en trois colonnes, chacune dans un bloc indépendant. Ces blocs sont placés côte à côte grâce aux styles. Pour préserver cette disposition qu'elle que soit la taille de la fenêtre du navigateur, toutes les largeurs et les marges internes seront définies en pourcentage.
<head>
<style type="text/css">
#Gauche {
width:28%;
float:left;
background:powderblue;
padding-bottom:10px;
padding-top:10px;
padding-left:1%;
padding-right:1%;
}
/*Ce premier style s'applique à la balise div nommée Gauche. Sa largeur est égale à 28% plus la largeur des marges internes (padding-left, padding-right) qui font chacune 1% : Total de 30 %. Le bloc flotte : il est isolé du flux normal de la page et calé sur le bord gauche (float:left) de la fenêtre. Toute autre élement, s'il n'est pas flottant se positionnera autour de ce bloc. Alors que les blocs flottants se mettront automatiquement à droite de celui-ci.*/
#Centre {
width:48%;
float:left;
background:blanchedalmond;
padding-bottom:10px;
padding-top:10px;
padding-left:1%;
padding-right:1%;
}
/* Le bloc central est flottant également. Il se colle au precedent bloc. Les marges internes supérieur padding-top et inférieure padding-bottom laisse un peu d'espace en haut et en bas du bloc pour aérer le texte. */
#Droite {
width:18%;
float:left;
background:palegreen;
padding-bottom:10px;
padding-top:10px;
padding-left:1%;
padding-right:1%;
}
/* Le troisième bloc se place à droite des deux premiers. Chaque bloc à sa propre couleur de fond pour bien les diférencier. */
#Bas {
background:oldlace;
border-top:1px solid black;
border-bottom:1px solid black;
text-align:center;
padding-bottom:10px;
padding-top:10px;
width:100%;
clear:both;
}
</style>
</head>
/* Le bloc du page de la page s'étend sur toute la largeur width:100%. La propriété clear interdit l'apparition d'élements flottants à sa gauche ou à sa droite. Ce bloc est ainsi poussé vers le bas. On a ajouté des bordures supérieur et inférieur épaisse de 1px. */
<body> <div id="Gauche"> <h4>Colonne gauche :</h4> <p>Texte texte texte...</p> </div> <div id="Centre"> <h4>Colonne centrale :</h4> <p>Texte texte texte...</p> </div> <div id="Droite"> <h4>Colonne droite :</h4> <p>Texte texte texte...</p> </div> <div id="Bas">Bas de page - Copyrigth 2005</div> </body>