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:

width/height

Sets the width/height of the element. It will be exactly this wide/high, no matter if its content fits or not.

min-width/min-height

Sets the minimum width/height of the element. It will be at least this wide/high, but will expand if its content requires it.

max-width/max-height

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 width/height as if it were min-width/min-height, and who doesn’t have any support for min-width/min-height or max-width/max-height.

What this means is that if you want the correct behavior in IE for width/height (i.e. a fixed size for an element, no matter what), or want to use max-width/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.

JavaScript

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

Related reading

The Real Reason Microsoft Won’t Support CSS2 in IE7 by Dean Edwards.