Standard compliant CSS Min Width and Max Width for IE6

It’s not actually a pure CSS tricks/hacks, as we all know, IE6 doesn’t support CSS minimum and maximum width but we can achieve those properties to work using DOM manipulation.

I used jQuery library to make my DOM manipulation simple and easy.

First step, get the CSS min width and max width value defined in the CSS file, so that the resizing will still dependent on the CSS properties. I use “container” as my div tag ID that wraps up all the html elements.

  var min_width	= parseInt($('#container').css('min-width'));
  var max_width	= parseInt($('#container').css('max-width'));

Here is the function that will resize the container:

  function resizeContainer()
  {
    var old_width = document.body.offsetWidth;
    var new_width = old_width;

    if (old_width > max_width)
    {
      new_width = max_width - 40 + 'px';
    }
    else if (old_width < min_width)
    {
      new_width = min_width - 40 + 'px';
    }
    else
    {
      new_width = '96%';
    }

    $('#container').css({width: new_width});
  }

Call the resizer function on page load to make the layout render base on the browser’s width.

On window resize, call the resizer if the min_width and max_width has values. There’s no reason to resize if the “container” in CSS file doesn’t have min-width and max-width values. Here’s the code to resize the container on window resize:

  $(window).resize(function()
  {
    if (min_width!='undefined' && max_width!='undefined')
    {
      resizeContainer();
    }
  });

To wrap it all, here’s my complete js code:

$(document).ready(function()
{
  // get the CSS container width values
  var min_width	= parseInt($('#container').css('min-width'));
  var max_width	= parseInt($('#container').css('max-width'));

  // resize the container on page load
  resizeContainer();

  $(window).resize(function()
  {
    if (min_width!='undefined' && max_width!='undefined')
    {
      resizeContainer();
    }
  });

  function resizeContainer()
  {
    var old_width 	= document.body.offsetWidth;
    var new_width	= old_width;

    if (old_width > max_width)
    {
      new_width = max_width - 40 + 'px';
    }
    else if (old_width < min_width)
    {
      new_width = min_width - 40 + 'px';
    }
    else
    {
      new_width = '96%';
    }

    $('#container').css({width: new_width});
  }
});

Save the js code on external file or include the code on the header tag of your document but use conditional comments so that only IE6 will execute it.

<!--[if IE 6]>
<script src="ie6.js" type="text/javascript"></script>
<![endif]-->