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>
Caveats
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.