Getting Around IE’s Lack of Min-Width Support

Min-width is a useful CSS property that, as it’s name suggests, sets the minimum width of an element to a specific pixel width (or em or whatever). It’s very useful.

The problem? Microsoft. Internet Exploder doesn’t support the property. Instead of ranting about Microsoft’s pathetic browser, I’ll skip to the solution…

First, make sure you have an IE-specific stylesheet to put all you IE hacks in. It makes it easier to manage things, and it makes sure hacks like this don’t stop your CSS from validating. (Believe me, this one will.) Include it in your page head like so:

<!--[if IE]><link rel="stylesheet" href="ieislame.css" type="text/css" media="all" /><![endif]-->

Next, add something along the lines of this to the file:

#mydiv { width:expression(document.body.clientWidth < 850? "850px": "auto" ); }

Just replace both instances of “850” with the minimum width you prefer.

Not too hard, but it shouldn’t be necessary.

  • Blogger Templates

    hey thanks for the fix,,,,,many of my blogs desperately require this.

  • tuzde

    Add this to the top of your html document in IE and the min-width will work without the extra coding. You may also switch Transitional to Strict.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

  • redwall_hp

    Even in IE6?