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? )