Propriété min-width

La propriété min-width définit la largeur minimale d'un élément. Les valeurs de la propriété peuvent être n'importe quelle unité de mesure ou le mot-clé none, qui signifie l'absence de valeur.

Elle est généralement définie pour un élément avec une largeur fluide (la largeur est définie en pourcentages ou n'est pas définie du tout, et l'élément s'étend en largeur en fonction de son contenu). Si la largeur de l'élément est définie en pourcentages - lors de la réduction de la fenêtre du navigateur, elle diminuera jusqu'à atteindre la valeur de min-width.

Syntaxe

sélecteur {
	max-width: valeur;
}

Exemple

Dans cet exemple, la largeur représente un pourcentage de la largeur du parent. Réduisez la largeur de la fenêtre du navigateur, et le conteneur se réduira également pour s'adapter à la largeur de la fenêtre. Cependant, il ne se réduira que jusqu'à la valeur définie dans min-width, c'est-à-dire 400px. Dès que le conteneur atteint cette largeur, il cesse de se réduire :

<div id="elem"></div>

#elem {
	width: 70%;
	min-width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemple

Dans cet exemple, la largeur du conteneur est limitée des deux côtés : il ne pourra pas devenir plus grand que 900px ni plus petit que 400px :

<div id="elem"></div>

#elem {
	width: 70%;
	min-width: 400px;
	max-width: 900px;
	height: 100px;
	border: 1px solid black;
}

Voir aussi

la propriété max-width,
qui définit la largeur maximale d'un élément
la propriété max-height,
qui définit la hauteur maximale d'un élément
la propriété min-height,
qui définit la hauteur minimale d'un élément