CSS minimum and maximum sizes

The CSS2 standard specifies four properties that can be very useful when working with CSS layouts: min-width, max-width, min-height and max-height, These can be used in conjunction with the well-known width and height properties to get effects which can be especially helpful in designing layouts that are a mix of fixed-size and window-size-relative units.

For example, one could specify a stretch of text as being width: 50%; of the window size, but to avoid the lines of text in it becoming too short or too long to be easily readable in very wide or narrow browser windows, one could add min-width: 15em; max-width: 40em;. A column could be given a min-height of 100% with normal (auto) height, so that it’s always at least the same height as the window, but can be bigger if there is too much content to fit in it. And so on.

The only problem with them is that they don’t work in Internet Explorer for Windows. ("Until now...")

Using minmax.js

This script makes these CSS properties work transparently in IE version 5.0 upwards on all platforms except Mac. (For tedious technical reasons there is nothing can be done for IE/Mac, sorry.)

Just insert a link to the module in your HTML page:

<script type="text/javascript" src="minmax.js"></script>


Remember IE’s implementation of height isn’t quite the same as the spec and the other browsers when overflow is set to visible (the default setting). If the content overflows the element, IE will make the element bigger to fit. If you don’t want this, use a different setting of overflow.


Version 1.0: module, test page.