Forum Moderators: not2easy
Of course, IE doesn't understand this, but it treats "width" and "height" KIND OF like this. It expands the container if the content takes up more than the width or height specification. OK, I hope that's not too confusing.
having trouble with these two properties of css
min-height:200px;
This tells the browser that the minimum height of the element should be 200px. No matter what happens, no matter how much content I dump into that box or pull out of it, no matter how much a user shrinks or enlarges my text, whether the box is empty or full or bursting at the seams, it needs to be AT LEAST 200px high.
Unlike the regular height property, this 200px is not an absolute, set-in-stone height for the element. Should I have enough content to fill a 400px high box, and put it in my min-heighted box, the box will expand to 400px high (whereas height, in a compliant browser, will not change with content).
In other words, min-height sets a low-end threshold for the height of the box, but allows the content to control the height should the content exceed 200px.
IE browsers do not support the min-height property. But they also improperly implement the regular old height property, treating it in essentially the same way compliant browsers use min-height.
Min-width works in much the same way, except it does not allow content to dictate the width. Rather the minimum width is used to set limitations on how fluid page layouts resize when your browser window is adjusted. If you set min-width to 500px, the (non-IE) browser will not let your element shrink to less than 500px wide. IE doesn't support this one, either.
explain how to use them
Min-height is usually used when a designer wants a certain box on their page, often the main containing block, to fill up a certain amount of space on the page but also allow that box to expand when the amount of content requires it. Remember that in compliant browsers, regulr old height is very unforgiving. If your content exceeds the height of the box, the text simply spills out of it...very unseemly. If, however, you don't set a height, it defaults to auto, which makes the height completely controlled by the height of the content. So no height property can mean a short box when the content isn't long enough; an explicit height property can mean content that spills out of the box. The solution, then, is min-height.
To actually implement this, you have to code it so that compliant browsers get the min-height property and a height property of auto, while IE gets just a height property. Here's one way to do it...
#YOURBOX {
min-height:200px;
height:auto;
}
/*start iemac hide\*/
* html #YOURBOX{
height:200px;
}
/*end iemachide*/
Min-width, as mentioned above, is generally used to restrict the down-sizing of a box in a liquid (or fluid or relative) layout. If my content box is set to fill 50% of the screen width, it will be around 400px wide if the browser is maxed out at 800X600 res. But if you resize the browser so it's only 200X200px big, my content block is now only 100px wide. That can wreak havok on the readability of my text, so I set min-width to 300px. Now, no matter what you do to your browser, my box will always be at least 300px wide and preserve readability. Whn you resize your browser, the text will jump back to 400px wide (50% of 800px).
cEM
