Nous allons ici travailler uniquement sur les balises de type block, et notamment sur les balises <div>.
Les balises de type block on une dimension, c'est-à-dire une hauteur et une largeur.
Pour modifier ces valeurs il suffit d'utiliser les propriétés CSS concernées, qui sont modifiables à souhait.
Voici les propriétés CSS pour modifier la hauteur et la largeur d'un bloc :
height : pour la haut, en pixels ou en pourcentages
width : pour la largeur, en pixels ou en pourcentages
Par défaut un bloc prendra toute la largeur qui lui est accordée, c'est-à-dire qu'il aura une largeur de 100%. Quand on parle des pourcentages on parle en fonction de la taille de la fenêtre du navigateur du visiteur.
Si je veux que mon paragraphe fasse 50% (la moitié) de la largeur de la fenêtre du navigateur et que dans un même temps sa hauteur soit de 75 pixels indépendamment de la hauteur de la fenêtre du navigateur, je fais :
p { width: 50%; height: 75px; }
Et voilà le travail.
Mais ce n'est pas tout !
CSS nous permet également de modifier les tailles minimales et maximales !
Pour cela il existe quatre propriétés :
min-width : largeur minimale
min-height : hauteur minimale
max-width : largeur maximale
max-height : hauteur maximale
Donc si je veux que mes paragraphes occupent au moins 50% de la largeur MAIS qu'ils soient toujours supérieurs à 400px, on fait comme ceci :