Min-width for IE revisited

Much has been written over the years of how to get min-width to work in Internet Explorer (IE). Min-width works almost like width but it only sets a lower bound on the width (“You can’t get any narrower than this!”). Very useful when building layouts that are supposed to work on many screen resolutions. This article is a remake of Stu Nicholls variant but removing most of the divs he uses. An example is availiable.

If all browsers supported standards

The question that triggered this article was someone that wanted the page to be 90% wide but no less than 500px. For those of you that know CSS2 you know that this can be done by simply setting:


#element {
width: 90%;
min-width: 500px;
}

Since no versions of IE support the min-width property we will have to try something else.

What has been done before?

To solve this problem there has been suggestions of all sorts of things: Javascript, Proprietary CSS expressions, One that doesn’t handle both width and min-width, and One using four (!) extra divs. When looking at the different solutions I quickly came to the conclusion that I didn’t want to use javascript. It would be better if it could be accomplished using CSS only. That rules out the two first versions. Dave Shea’s does not handle both width and min-width. The last one uses a lot of divs, are really all of them needed?

Stu’s solution is set to work in IE 5, an old outdated browser and by removing the code to make it work for that one we will be able to lose some of the code.

IE5 has a broken box model, so you can’t set both margin/border/padding and a width on the same container and get consistent behaviour across browsers. I know of two ways to sidestep that bug: The first one is using the ugly box model hack which incorporates a parsing bug in how IE 5 handles the voice-family property. The other way is to use two containers and set the width on one of them and the margin/border/padding on the other. Stu uses the latter variant and therefore has two unnecessary divs. Two down, and counting!

Next up we can use the tag just like if it was a div, setting the width and min-width on that one. Another div bites the dust. If we can handle using a solid background color another one can be left out.

With everything summed up we can get min-width for IE on any container using only one extra div. This works under the constraint that we don’t support IE 5 and that we can handle a single color background. I hope that helps someone out there.

10 responses to “Min-width for IE revisited

  1. Pete: what kind of max-width? I can think of a few ways to do a one with percents (max-width: 90%?), is that what you’re looking for?

  2. @David: No I havn’t. From what I’ve heard about IE7 it’s not even close to be released for the public (serious rendering bugs). I have therefor not started testing in that one yet. I’m guessing that this min-width won’t work there since IE7 does not supprort min-width but ignores * html. I will have to go back and fix my examples for IE7.

  3. I am trying to make my web site to be customized to each individual user resolution. Is this possible and if so how can I do that?

  4. Misty: you can hardly afford to customize to each individual resolution (there are too many out there). But you can make to or three variants of the default stylesheet for mutliple sizes and connect them with the dynamic resolution dependent layout solutions out there: The man in blue / particletree.

  5. IE treats width like modern browsers treat max-width, so it can be alleviated easily by using:

    .object { max-width:500px; }
    * html .object { width:500px; }

  6. These bastards from ms when are they going to make a standart compliant browser. U know what in my new website i am going to write that it doesnt support IE cause of its crappy rendering!

Comments are closed.