Propiedad min-width

La propiedad min-width establece el ancho mínimo de un elemento. Los valores de la propiedad pueden ser cualquiera de las unidades de tamaño o la palabra clave none, que significa ausencia de valor.

Normalmente se establece para un elemento con ancho fluido (el ancho se establece en porcentajes o no se establece en absoluto, y el elemento se expande en ancho por su contenido). Si el ancho del elemento se establece en porcentajes, al reducir la ventana del navegador, éste se reducirá hasta alcanzar el valor de min-width.

Sintaxis

selector {
	max-width: valor;
}

Ejemplo

En este ejemplo, el ancho es un porcentaje del ancho del elemento padre. Reduce el ancho de la ventana del navegador, y el contenedor también se reducirá para ajustarse al ancho de la ventana del navegador. Sin embargo, sólo se reducirá hasta el valor definido en min-width, que es 400px. Una vez que el contenedor alcance este ancho, dejará de reducirse:

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

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

Ejemplo

En este ejemplo, el ancho del contenedor está limitado por ambos lados: no podrá ser mayor de 900px ni menor de 400px:

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

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

Véase también

la propiedad max-width,
que establece el ancho máximo de un elemento
la propiedad max-height,
que establece la altura máxima de un elemento
la propiedad min-height,
que establece la altura mínima de un elemento