provided by: 
Originally published at Internet.com
Introduction
The lack of support for minimum width in Internet Explorer has caused many problems for web designers. Until now, the only way to emulate min-width is to use either JavaScript or Internet Explorer expressions (indirect JavaScript). After many hours of experimenting, I've found a CSS only answer. My method requires additional divs to control the width and min-width but I believe this is a small price to pay for a non-JavaScript method that works cross-browser (even on Mac IE5).
Method
The basic idea is to feed browsers that understand min-width the normal method (as follows) and to also feed Internet Explorer it's own special styling (which I'll explain in the following tutorial).
The CSS
body { background:#fff url(rule.gif) 20px 0; color:#000; font-family:"trebuchet ms", "times new roman", times, serif; margin:20px; padding:0; } .width { width:50%; min-width:300px; background:#fff; } .content { border:1px solid #c00; padding:5px; } .rule { width:300px; background:#c00; color:#fff; margin:1em 0; }
body - general body styling
* background: #fff url(rule.gif) 20px 0; - shows the background grid (10 pixel and 100 pixel marks). * color: #000; - sets the font color to black. * font-family: "trebuchet ms", "times new roman", times, serif; - sets up the font choice. * margin: 20px; - sets the margin to 20 pixels. * padding: 0; - sets the padding to zero.
.width - the outer div that controls the width and min-width for browsers that understand this (or just the width for Internet Explorer).
* width: 50%; - the preferred width. * min-width: 300px; - the minimum width allowed. * background: #fff; - sets the background color to white.
.content - The container for the content in which you can add a border and/or padding while not affecting the width and min-width.
* border: 1px solid #c00; - adds a red 1 pixel solid border. * padding: 5px; - sets the padding to 5 pixels.
.rule - Includes a rule line to show when min-width has been reached.
* width: 300px; - sets the width to 300 pixels. * background: #c00; - makes the background dark red. * color: #fff; - makes the text color white. * margin: 1em 0; - adds a top and bottom margin of 1em.
The (X)HTML
{width:50%; min-width:300px;} for non IE browsers
This div has a min-width of 300px and a width of 50%.
The width can be any percentage and the min-width a px or em value.
this is 300px wide
‡ Normal method demo 1
If you try the above example in any browser except Internet Explorer and resize your window, the outer container will shrink until it reaches the minimum width of 300 pixels and then it will remain at this fixed width.
In contrast, if you try this in Internet Expplorer, the container will continue to shrinking beyond the 300 pixel mark and will only stop when the text will not allow it to shrink further.
For Internet Explorer only
The following steps will show how to make Internet Explorer fall into line with the conforming browsers.
Step 1
The general idea is to use a div with a left border width set to the same value as the minimum width. The theory is that borders of divs will not normally shrink once the body of the div has reached zero width.
To make sure that all other browsers will ignore this extra styling we will target Internet Explorer using the normal hack of preceding the style with '* html'.
We'll add this extra div with the class .minwidth
The CSS
* html .minwidth { border-left:300px solid #800; } * border-left:300px solid #800; - sets the left border to 300 pixel solid dark red so that it can be seen.
The (X)HTML
{width:50%; min-width:300px;} for non IE browsers
This div has a min-width of 300px and a width of 50%.
The width can be any percentage and the min-width a px or em value.
this is 300px wide
‡ Step 1
All these steps will only be visible in Internet Explorer; other browsers will continue to see min-width correctly implemented.
The above example shows the left dark red border set at 300 pixels wide and the text to the right on a white background. Reducing the width of the browsers window will shrink the text width to a minimum but will not shrink the border.
Step 2
We now need to move the text left by 300 pixels so that it occupies the border width as well as the normal width. This can be done by adding another div with a left margin set to -300 pixels.
The CSS
* html .container { margin-left:-300px; } * margin-left:-300px; - set the left margin to -300 pixel so that the contents will move over the border area.
The (X)HTML
{width:50%; min-width:300px;} for non IE browsers
This div has a min-width of 300px and a width of 50%.
The width can be any percentage and the min-width a px or em value.
this is 300px wide
‡ Step 2
This now shows the text occupying the dark red border area as well as the white area giving a total width of 50%, but if you try to resize the window you'ill see that we are back to square one with the contents again continuing to shrink past the min-width of 300 pixels.
This has happened because of an Internet Explorer rendering bug which has caused the extra divs to have their 'hasLayout' property set to false (see Microsoft hasLayout property for further information).
Step 3
There are several ways to trigger 'hasLayout' again but the most common and easiest to use method is the 'Holy hack' which is used to give the divs a height of 1 pixel.
The CSS
/**/ * html .minwidth, * html .container { height: 1px; } /**/
Apply the hack to the .minwidth and .container divs.
The surrounding /**/........./**/ is used to hide this style from IE5 on a Macintosh which, as far as I know, does not have this problem.
‡ Step 3
Reducing the browser window will now reduce the overall width until the min-width is reached and there it will stop, but this causes another problem. The that text which occupied the border area has now vanished behind the dark red border and only the text over the white area is visible.
Step 4
Another problem and another solution. If I give the container div a relative position then the text will reappear in front of the dark red border.
The CSS
* html .container { margin-left:-300px; position:relative; /* ADDED */ }
‡ Step 4
Now we have the whole text visible in a 50% wide outer box that will shrink down to the dark red border width (min-width) and there it will stop.
Step 5
All that is left is to change the border color to white so that the contents div appears to have a white background.
The CSS
* html .minwidth { border-left:300px solid #fff; /* CHANGED */ }
‡ Step 5
We now have a fully working method of producing min-width in Internet Explorer and we could finish here, but there is still a limitation - we need to have a background color to make this work. This is because Internet Explorer does not have a 'transparent' option for border color.
Step 6
If we need to have a background image showing through our min-width div then the above method won't be suitable.
Luckily, there's an alternative that will solve this problem and it only takes one extra div to make it work.
If, instead of using the left border width to control the min-width, we use the left padding width we will not have to specify a color for any of the divs. Here's the following CSS: .width { width:50%; min-width:300px; /* CHANGED TO REMOVE BACKGROUND COLOR */ } * html .minwidth { padding-left:300px; /* CHANGED MARGIN TO PADDING */ }
‡ Step 6
Now you'll see the background image showing through the div(s) but as many of you will have spotted, this method will not stop shrinking at the min-width because Internet Explorer will shrink padding widths.
Step 7
This is where the extra div (class="layout") is utilized to stop the padding width from shrinking.
The (X)HTML
{width:50%; min-width:300px;} for non IE browsers
This div has a min-width of 300px and a width of 50%.
The width can be any percentage and the min-width a px or em value.
this is 300px wide
The extra CSS is just to add the .layout class to the hasLayout list.
The CSS
/**/ * html .minwidth, * html .container, * html .content, * html .layout { height:1px; } /**/
‡ Step 7
You should now see a fully working Internet Explorer min-width demonstration with a transparent background.
Step 8
Another possible requirement could be for the overall width container to be centered on the page.
This is not a problem and can be achieved using the normal method of 'text-align:center' for Internet Explorer and 'margin:0 auto;' on the outer width div for all other browsers.
Examples of centered divs, one with a background color and one with
Author: Stu Nicholls
Read article at Internet.com site