On reprend ici l'exemple déjà envisagé et intitulé "Exemple 1 : des blocs". On vient de voir que pour pouvoir attribuer un style à un bloc, il fallait utiliser un selecteur. Dans le cas présent, chaque élément devra avoir un comportement propre, donc on utilisera des selecteurs d'identifiants. Le code html du corps de la page sera par conséquent celui-ci :

<div id="webdev1" >webdev1</div>
<div id="webdev2">webdev2</div>
<div id="webdev3"><div id="webdev4">webdev4</div>webdev3</div>
<div id="webdev5">webdev5</div>

Le style placé dans le fichier style.css ne précisera dans un premier temps que la forme et la position de ces cinq blocs (les commentaires sont entourés de /* et */). Le but étant au final, d'avoir un en-tête, un pied de page, une colonne de menu et un bloc flottant à droite dans ce qui reste.

/* bloc webdev1 de hauteur 20% et dont la couleur du fond est  #4e0409 (code hexadécimal) */

 #webdev1{
background-color:#4e0409;
height:20%;
}

/* bloc webdev2 flottant à gauche, de hauteur 60%, de largeur 20% et dont la couleur du fond est  #0c2628 (code hexadécimal) */

 #webdev2{
float:left;
background-color:#0c2628;
width:20%;
height:60%;
}

 /* bloc webdev3 flottant à gauche, de hauteur 60%, de largeur 80% et dont la couleur du fond est  #060d85 (code hexadécimal) */

 #webdev3{
float:left;
background-color:#060d85;
width:80%;
height:60%;
}

 /* bloc webdev4 flottant à droite, de hauteur 40%, de largeur 40% et dont la couleur du fond est  #222222 (code hexadécimal) */

#webdev4{
width:40%;
height:40%;
float:right;
background-color:#222222;
}

/* bloc webdev5 qui supprime l'effet des flottants précédents , de hauteur 20% et dont la couleur du fond est  #4e0409 (code hexadécimal) */

 #webdev5{
clear:both;
background-color:#4e0409;
height:20%;
}

Remarque importante : pour pouvoir utiliser des hauteurs en pourcentages (comme dans le cas présent), il est nécessaire que les balises html et body aient une hauteur. Si l'on veut occuper l'intégralité de la fenêtre du navigateur, celle-ci doit être égale à 100%. On rajoutera donc les règles de style suivantes  :

html{
height:100%;
}
body{
height:100%;
}