The max-width property
The max-width property sets a maximum
width of an element. The property value is any
size units
or the none keyword, meaning no value.
Typically the property is set for an element
with a floating width (the width is set as a
percentage or not set at all, and the element's
width is expanded by its content). If the width
of the element is set as a percentage, when
the browser window is enlarged, it will
increase until it reaches the max-width
value.
Syntax
selector {
max-width: value;
}
Example
In this example, the width is a percentage
of the parent's width. Increase the width
of the browser window, and the container
will also increase to accommodate the width
of the browser window. However, it will only
grow up to the value defined in max-width,
which is 900px. Once the container
reaches this width, it will stop growing:
<div id="elem"></div>
#elem {
width: 70%;
max-width: 900px;
height: 300px;
border: 1px solid black;
}
:
Example
In this example, the width of the container
is limited on both sides: it cannot become
larger than 900px and smaller than
400px:
<div id="elem"></div>
#elem {
width: 70%;
max-width: 900px;
min-width: 400px;
height: 300px;
border: 1px solid black;
}
:
See also
-
the
min-widthproperty
that sets a minimum width of an element -
the
max-heightproperty
that sets a maximum height of an element -
the
min-heightproperty
that sets a minimum height of an element
