Explaining width and height
Many people have written about this, one way or the other, but I thought it was about time to explain how to handle width and height in CSS, and how it’s actually supposed to work.
There are three properties for width and height that allows you total control of the rendering, and their names are pretty self explanatory for how they work:
- Sets the width/height of the element. It will be exactly this wide/high, no matter if its content fits or not.
- Sets the minimum width/height of the element. It will be at least this wide/high, but will expand if its content requires it.
- Sets the maximum width/height of the element. It will be as wide/high as its content needs, but never more than the set value.
Crystal clear, isn’t it? So is it that easy?
Of course not. Enter IE, who handles
height as if it were
min-height, and who doesn’t have any support for
What this means is that if you want the correct behavior in IE for
height (i.e. a fixed size for an element, no matter what), or want to use
max-height, you need to resort to one of these:
- Dynamic expressions
- Preferably used in an IE-specific stylesheet included with conditional comments, see RobLab’s CSS page‘s first item for more info.
- You can either write the script yourself, or take a look at Dean Edward‘s IE 7 project (inevitably time for a name change now, right Dean? :-))
The Real Reason Microsoft WonÃ¢â‚¬â„¢t Support CSS2 in IE7 by Dean Edwards.
Well explained. I really wonder how good CSS2/3 support IE7 will have..
I wonder too, but I have high hopes that the Microsoft/WaSP task force will have a good influence on it, and Dean Edwards is also part of that task force.
The MSTF is about to have a huge impact I feel. Just read Molly's latest post:
Good to see you here!
I read Molly's post previous to your comment, and I really think the task force will push things in the right direction.
Best of luck!
Strangely, three elements do have a min-height-property in IE. These are td, th and tr. See CSS Enhancements in Internet Explorer 6
Thank you, that's something I didn't know!
I've definitely been to that page before, but apparently I haven't read it thoroughly.
(I edited your link text since it was a little long, I hope you don't mind :-)).