max-width and min-width support for IE

There are quite a few very useful CSS2Cascading Style Sheets Standard that is currently the most supported. (CSS Level 2) Properties that IE does not support. One of these is the max-width and min-width properties (along with min-height and max-height).

What is max-width?

The max-width CSS2 property will limit the width of the selected element to a certain value. 
max-width example
  1. /* CSS2 Compliant browsers (not IE < 6.0) */
  2. #body_wrap {
  3.    max-width: 800px;
  4. } 
  
The min-width property behaves the same, limiting the selected element to a minimum width specified.

IE support for max-width and min-width

Unfortunately IE does not support the max-width and min-width property via pure CSS. However, IE allows you to define property values via JavaScript inside CSS! This is done via the expression() function. 
max-width example
  1. /* IE's expression() allows JavaScript in CSS */
  2. selector {
  3.    property: expression('some JavaScript equating to a string value here');
  4. } 
  
This can be thought of in JavaScript as: 
  1. <script>
  2. /* IE's expression() explanation in JS */
  3. selector.style.property = 'some JavaScript equating to a string value here';
  4.  
  5. </script> 
  

Enabling IE support for max-width and min-width

Using the expression() custom IE function, we can now define a width dynamically in our CSS. 
  1. /* CSS2 Compliant browsers (not IE < 6.0) */
  2. #body_wrap {
  3.    max-width: 800px;
  4. }
  5.  
  6. /* Dynamic assignment of width based on widow width. (* html allows only IE selection) */
  7. * html #page_wrap {
  8.    width: expression(Math.min((document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth) - 20, 800)+'px');
  9. } 
  
Math.min() returns the lowest value taken in as parameters.
(document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth) returns the width of the window.
We subtract 20 from the width of the window to account for the vertical scrollbar which is ever-present in the IE browser. Together they calculate the correct width of the #body_wrap based on the window width.

An explanation in JavaScript:

max-width via JavaScript
  1. <script>
  2.  
  3. /* Dynamic assignment of width based on widow width every time the window is resized */
  4. function resize_page_wrap() {
  5.    var win_width = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
  6.    document.getElementById('page_wrap').style.width = Math.max(Math.min(win_width - 20, 800), 600)+'px';
  7. }
  8.  
  9. window.onload = resize_page_wrap; // first evaluation when window finished loading
  10. window.onresize = resize_page_wrap; // re-evaluate when ever the window resizes
  11.  
  12. </script> 
  
With JavaScript we have to set event listerners for the window.onload and window.onresize properties. With CSS, the CSS property values are re-calculated when ever the window changes.

We can enable support for min-width just as we did with max-width. 

  1. /* CSS2 Compliant browsers (not IE < 6.0) */
  2. #body_wrap {
  3.    min-width: 600px;
  4. }
  5.  
  6. /* Dynamic assignment of width based on widow width. (* html allows only IE selection) */
  7. * html #page_wrap {
  8.    width: expression(Math.max((document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth) - 20, 600)+'px');
  9. } 
  

The solution to IE's min-width max-width problems

We can also combine what we've done to create max-with, min-width emulation for IE. 
  1. /** css2 compliant */
  2. #page_wrap {
  3.    max-width: 800px;
  4.    min-width: 600px;
  5. }
  6.  
  7. /* ie min-width, max-width emulation */
  8. * html #page_wrap {
  9.    width: 800px; /* in case JS is off, set a fallback width. default is auto */
  10.    width: expression(Math.max(Math.min((document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth) - 20, 800), 600)+'px');
  11. } 
  
All you have to do is change the values 800 and 600 to your min/max-width's and you're set to have it working in IE.

Disadvantages

  1. Problem is, the expression() function in IE CSS, requires JavaScript to be enabled on the IE browser.

Benefits

  1. I'd assume its faster than using pure javascript.
  2. It also keeps all your styles in the CSS file instead of distributing it to JS.
  3. JS is available on most browsers (95% average on this site).

Notes

  1. The * html notation in the CSS is a custom IE CSS selector.
  2. expression() only evaluates to a value. So you can only use a subset of JavaScript that calculates values. It does support conditional statements however via the shorthand syntax:
    expression( condition ? 'true value' : 'false value' )
  3. You can support multiple conditional statements as such:
    expression( condition ? 'true value' : (condition ? 'true value' : 'false value') )

Please let me know if you have any suggestions via the comment form. :)