Minimum and Maximum widths in IE6 CSS

In a previous article I showed you how easy it is to create a constrained fluid layout i.e. one with a minimum and maximum widths. While this works on all standards compliant browsers, it doesn’t work in Internet Explorer 6.

There is, however, a prorietary way of implmenting this in IE as shown below:

This line is saying that we want a body width of 80%, with a minimum body width of 500px (i.e. a client width of 500/80% = 625), and a maximum body width of 900px. This is done using the expression evaluation support in IE (not a good thing btw).

Now, this is not a standards compliant way of doing things, so any validators will start complaining, as will the other browsers, and rightly so. To hide it from everyone except ie6, we’re gonna cheat and place this in a stylesheet that is conditionally included.

So, save this in a file called ie6.css, and add the following to your x/html files: