Min-width: minimum width for Internet Explorer 6

The css property min-width applies a minimum width to a selected element.

If the browser’s windows is resized by the user, the content will follow the movement and resize itself until a certain width. Passed that limit, the window’s scrollbars will appear.

This property is useful in the case of a fluid layout or when applying to the content the float property to avoid that the block elements move downwards if the space is limited.

Unfortunately, the min-width is not supported by Internet Explorer 6.

Next, 2 solutions to specify a minimum width for IE6.

NB: to fully understand the difference in between the different examples, you will need to use IE6 as browser and resize the browser’s windows to see the effect of the min-width in action.

I will start with a basic example of a div container with a gray background (background-color) with no specific width (width) or minimum width (min-width).

The basic HTML structure:

<div id=”container”/>
—the content—
</div>

The css rules:

#container{
background-color:#ccc;
}

The result is a gray block which resizes itself with no limits of width when the browser’s windows is redimensioned.

Let’s add the css property min-width to the div ‘container’.

The css rules:

#container{
background-color:#ccc;
min-width:500px;
}

The result: at a width of 500px, the horizontal scrollbar appears respecting the specified minimum width.

If you are using Internet Explorer 6 though, the result will be different. As said before, the css property min-width is not supported by Internet Explorer 6 and the specified minimum width is ignored.

The first solution: the Microsoft property expression()

Briefly, the property expression() created by the Microsoft is an extension proper to the browser Internet Explorer which allows to assign dynamically a value to a css property via the Microsoft JScript (very similar to Javascript, to the point that if the user has Javascript disabled this Microsoft property will not work).

NB: the use of expression() is not recommended by the W3C

The css rules:

#container{
background-color:#ccc;
min-width:500px;
width:expression(document.body.clientWidth < 502? "500px": "auto" );
}

The result: the min-width is respected by the browser which support this css property, while Internet Explorer 6 relies on the Microsoft property expression() so that if the browser’s window is smaller then 502px, the value of 500px is passed dynamiccaly to the css property width.

NB: to avoid that IE6 crashes using the above method it is important that the first value (502 in this example) is different from the second one (500 in this example) and that no margin or padding are applied to the div ‘container’.

The second solution: the use of an empty div

Following the recommendation of the W3C, we can simply add an extra div with a fixed width equal to the minimum width inside our div container which will resolve the problem of the min-width for IE6.

The basic HTML structure:

<div id=”container”/>
<div id=”min-width”/></div>
—content—
</div>

The css rules:

#container{
background-color:#ccc;
min-width:500px;
}
#min-width{
width:500px;
height:1px;
}

The result: the same as before without the us of expression().