The min-width property

The min-width property sets a minimum width of an element. The property value is any size units or the keyword none, meaning no value.

Typically set for an element with a floating width (the width is set as a percentage or not set at all, and the element is expanded in width by its content). If the width of the element is set as a percentage, when the browser window is reduced, it will decrease until it reaches the min-width value.

Syntax

selector {
	max-width: value;
}

Example

In this example, the width is a percentage of the parent's width. Reduce the width of the browser window and the container will also shrink to fit the width of the browser window. However, it will only shrink to the value defined in min-width, which is 400px. Once the container reaches this width, it will stop shrinking:

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

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

Example

In this example, the container width is limited on both sides: it cannot become larger than 900px and smaller than 400px:

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

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

The min-width property

Syntax

Example

Example

See also