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.
Search WWH ::

Custom Search