Width and height can be assigned a maximum and minimum values so as to accommodate all content within the area which an element occupies and limit the size of area the element can take and stopping expansion and contraction of the element. They consist of following properties
- min-width
- max-width
- min-height
- max-height
They are also used in a variable width design to not only adapt to different screen resolutions but also define the maximum area to occupy and prevent stretching or contracting.
min-width and min-height – Both of the properties define the minimum size an element will occupy or an lower-size constraint on the element. Both have an default value of 0. IE 6 do not support both of the properties. It takes following values
- length units
- percentage
They are given to prohibit shrinking of an element to fit the user’s window or its content. They are used as
.top { min-width: 500px; min-height: 100px; }
If the browser window or parent element becomes narrower than minimum values given, the element do not contract but a scroll bar appears and if the content in the element is less than the minimum height, the element will expand to the min-height value.
In IE 6 due to no support, both of these act like the width and height hence, conditional comments can be used for IE 6.
max-width and max-height – It is opposite of the min-width property and the max-width and max-height properties set an upper limit for width and height of element. Both have an default value of ‘none’. IE 6 do not support both of the properties. It takes following values
- length units
- percentage
- none
They specify a maximum length if the area available to element becomes larger. They are used as
.top { max-height: 200px; max-width: 120px; }
If content of ‘top’ class element is wider than 150px it will wrap or overflow its parent element but if parent element becomes taller than 200 pixels, the ‘top’ class element will remain at 200 pixels remaining content will overflow.
