HTML and CSS Reference
In-Depth Information
Valid values for these properties are lengths and percentages, where percentage is
relative to the dimensions of the containing block. For example, the following class makes
an element take up at least half of the available width and height:
.half {
min-width: 50%;
min-height: 50%;
}
max-width and max-height
The maximum dimensions of an element's content area are set with the
max-width
and
max-height
properties. They can be set with a length or percentage value, as well as the
keyword
none
to clear a previously set value.
max-width | max-height : none | <length> | <percentage>
By setting both the maximum and minimum width, you can define an interval for the
way the width of an element can vary. A block element using the following class expands
to fill 500 pixels if it can. When horizontal space is limited, the element is allowed to
shrink down to no fewer than 200 pixels.
.mybox {
max-width: 500px;
min-width: 200px;
}
The
max-width
property has priority over
min-width
. However, it is the other way
around with the height properties because
min-height
has priority over
max-height
.
Thus, an element using the following class has a height of 5 em, unless its content
requires more height. In that case, the element expands vertically up to its maximum
allowed value of 20 em.
.mybox {
max-height: 20em;
min-height: 5em;
}
Keep in mind that the fixed
width
and
height
properties should not be used together
with the
min-
and
max-
properties. The four
min-
and
max-
properties are supported by all
major browsers, including Chrome 1+, Firefox 1+, IE7+, Safari 1+, and Opera 8+. They are
popularly used together with media rules for creating fluid layouts that work well across
different screen sizes.
