Maximum and Minimum Height and Width in Internet Explorer

♦ Posted by Jeff Starr in CSS, HTML, JavaScript

Updated August 1, 2018 • 73 comments

Behold the seventh wonder of the virtual world: max/min-height and max/min-width properties are possible in Internet Explorer! Indeed, by taking advantage of IE’s proprietary CSS attribute, expression, you too can whip IE widths and heights into desirable proportions. The CSS expression attribute enables JavaScript commands to be executed within Internet Explorer. JavaScript via CSS? Thanks, Microsoft!

How it works in other browsers

Why is this so great? Well, because in other, standards-compliant browsers, max/min-height and max/min-width properties are easily accomplished with this simple bit of CSS..

<div style="max-width:333px;">
	[the contents of this division will be at most 333px in width on compliant browsers]
</p>

Of course, this is waaay tooo easy for Internet Explorer, which completely fails to understand the max-width attribute. Fortunately, IE supports its own expression attribute, which enables us to use JavaScript expressions to manipulate (X)HTML document properties such as max-width and max-height. For example, to specify a width property value via the expression attribute, we could use this:

div {
	width: expression(333 + "px");
}

..Which is equivalent to this:

div {
	width: 333px;
}

The down side to using IE’s expression attribute is that it fails when JavaScript is disabled (or otherwise missing) in the user’s browser. Nonetheless, establishing max/min-widths/heights (as well as other properties) remains an important tool in the web developer’s toolbox. So, without further ado, here are a few generalized examples for slapping IE widths and heights into proper shape..

max-width in IE

This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes) and include in your document via conditional comment. In this example, we are setting the max-width at 777px¹ for IE and all standards-compliant browsers:

* html div#division { 
	width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); /* sets max-width for IE */
}
div#division { 
	max-width: 777px; /* this sets the max-width value for all standards-compliant browsers */
}

In this example, we are setting the max-width at 33em for IE and all standards-compliant browsers:

* html div#division {
	width: expression( document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize) ? "33em" : "auto" );
}
div#division {
	max-width: 33em; /* this sets the max-width value for all standards-compliant browsers */
}

min-width in IE

This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the min-width at 333px¹ for IE and all standards-compliant browsers:

* html div#division { 
	width: expression( document.body.clientWidth < 334 ? "333px" : "auto" ); /* set min-width for IE */
}
div#division { 
	min-width: 333px; /* sets min-width value for all standards-compliant browsers */
}

max-height in IE

This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the max-height at 333px¹ for IE and all standards-compliant browsers:

* html div#division { 
	height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */
}
div#division {
	max-height: 333px; /* sets max-height value for all standards-compliant browsers */
}

min-height in IE

This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the min-height at 333px¹ for IE and all standards-compliant browsers:

* html div#division { 
	height: expression( this.scrollHeight < 334 ? "333px" : "auto" ); /* sets min-height for IE */
}
div#division { 
	min-height: 333px; /* sets min-height value for all standards-compliant browsers */
}

Footnotes

¹ Why is the conditional value slightly different than the target value in the expression? Read this comment to find out.

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.

73 responses to “Maximum and Minimum Height and Width in Internet Explorer”

Perishable 2008/01/08 10:29 pm • Post Author

@H5N1: Thanks for jumping in on this one! It certainly is nice having you around ;)

“5 – If it’s IE!”

— Classic :)

Dustin Diaz 2008/01/24 10:10 pm

min-height is best implemented in plain css like this:

selector {
     min-height: 500px;
     height: auto !important;
     height: 500px;
}

H5N1 2008/01/25 2:53 am

Hi Dustin,
nice to meet you even here :)
I just suggest the same solution some comment before :)
See comment n. 33 :)

Perishable 2008/01/27 7:45 am • Post Author

@Dustin: Yes indeed, thank you for sharing your CSS knowledge with us — it is greatly appreciated! :)

@H5N1: Thanks for keeping an eye on things around here when I’m offline (very kind of you)! ;)

nooto 2008/01/30 6:57 am

Hi there,

I’m pretty new at html, I was trying yesterday this method on my web site, however with no success so far. I guess I’m missing something, something about the syntax. This works fine for Firefox :

div.center {
     width: 70%; height: 82%;
     position: absolute;
     top: 8%;
     bottom: 7%;
     left: 14%;
     min-height: 527px;
     min-width: 726px;
}

Could you please let me know how to make it work for explorer also?

H5N1 2008/01/30 8:13 am

If you want to center your div is better to use another method instead positioning absolutely. :)
You have to create a wrap around the fiv (another div) with the attribute “text-align” set to “center” for IE to work and the contained DIV must have the “margin” property set to “0 auto”.
In this way you got a DIV center-positioned in all browsers and can remoce that problematic “position:absolute” :)
Give it a try! :)

nooto 2008/01/31 12:22 pm

Yeah I know I can position things in the center like that. However I would like to stay with my current configuration, well… so far… Or do you want to say that it’s not possible for me to have min-height and min-width with a configuration like this ? All I need is the same container to have min- height/width in IE, as it does in firefox.

H5N1 2008/01/31 12:31 pm

Well, back to your problem nooto:
you have to trick IE just like just said…
for the minimum height you con use:

min-height: 527px;
height : auto !important;
height : 527px;

What this trick do?
Simple: IE doesn’t understand the !important thing so it parse an error and DO NOT apply anything of that line. Other browsers’ rendering engine, instead, skip the content of the "height" declaration and apply the one with "!important". Ie, then, apply the HEIGHT attribute that it use to treat just like a minimum height.

For the minimum width you have to trik it with the "expression" thing:

width: expression( this.clientWidth < 527 ? "527px" : "auto" );

that’s all

Richard Kimber 2008/02/01 4:42 am

This is great, I’d never heard of ‘expression’ before. Thanks.

nooto 2008/02/01 5:09 am

H5N1 , you said :
“Ie, then, apply the HEIGHT attribute that it use to treat just like a minimum height.”
Doesn’t that mean that in IE my div will remain in fixed height all the time? I need it to have min-height if the browser window shrinks below min-size and expand if the window expands.

And about the min-width, I guess I just don’t understand how to use the syntax. As I understand I have to do this :

.center {
     width:70%;
     position: absolute;
     top: 8%;
     bottom: 7%;
     left: 14%;
     min-width:400px;
     min-height:292px;
     height : 82% !important;
     height : 292px;
}

* html .center {
width: expression( this.clientWidth < 400 ? "400px" : "auto" );
}

This still works for Firefox, but not for IE. Maybe you can help me with it? Please notice that I want my div to have size of 70% height and 82% width when browser is in “maximize” state.

Perishable 2008/02/03 9:40 am • Post Author

@nooto: Your expression will not work in Internet Explorer because of the equal width values in the clientWidth argument. When the values are the same in an expression using a “less-than” (<) or “greater-than” (>) operator, IE chokes on it. To correct this issue, simply replace the first width value (the one before the question mark) in min-width expressions such that its value is one pixel greater than the second expression. For example, in your case, you would write:

* html .center {
width: expression( this.clientWidth < 401 ? "400px" : "auto" );
}

Similarly, for max-width expressions, you need to ensure that the first width value is less than the second expression. For example:

* html .center {
width: expression( this.clientWidth > 399 ? "400px" : "auto" );
}

As for the min-height struggle, I would start with the basics:

.center {
   min-height: 500px;
   height: auto !important;
   height: 500px;
}

..verify that it works, and then build up from there.

Good luck!

Perishable 2008/02/03 9:46 am • Post Author

@H5N1: Yes, sorry about that — WordPress is a complete monster whenever it sees certain characters.. The best way to avoid gobbled code (at least at this site) is to wrap each line (word, character, whatever) in a <code> element. In the meantime, I am going to consolidate your posts into one, such that the correct code (i.e., less-than sign) is displayed in your original comment. Sorry for the confusion, and thanks for keeping an eye on things!

Regards,
Jeff

Comments are closed for this post. Something to add? Let me know.

Perishable 2008/01/08 10:29 pm • Post Author

@H5N1: Thanks for jumping in on this one! It certainly is nice having you around ;)

“5 – If it’s IE!”

— Classic :)
Dustin Diaz 2008/01/24 10:10 pm

min-height is best implemented in plain css like this:

selector {
     min-height: 500px;
     height: auto !important;
     height: 500px;
}
H5N1 2008/01/25 2:53 am

Hi Dustin,
nice to meet you even here :)
I just suggest the same solution some comment before :)
See comment n. 33 :)
Perishable 2008/01/27 7:45 am • Post Author

@Dustin: Yes indeed, thank you for sharing your CSS knowledge with us — it is greatly appreciated! :)

@H5N1: Thanks for keeping an eye on things around here when I’m offline (very kind of you)! ;)
nooto 2008/01/30 6:57 am

Hi there,

I’m pretty new at html, I was trying yesterday this method on my web site, however with no success so far. I guess I’m missing something, something about the syntax. This works fine for Firefox :

div.center {
     width: 70%; height: 82%;
     position: absolute;
     top: 8%;
     bottom: 7%;
     left: 14%;
     min-height: 527px;
     min-width: 726px;
}

Could you please let me know how to make it work for explorer also?
H5N1 2008/01/30 8:13 am

If you want to center your div is better to use another method instead positioning absolutely. :)
You have to create a wrap around the fiv (another div) with the attribute “text-align” set to “center” for IE to work and the contained DIV must have the “margin” property set to “0 auto”.
In this way you got a DIV center-positioned in all browsers and can remoce that problematic “position:absolute” :)
Give it a try! :)
nooto 2008/01/31 12:22 pm

Yeah I know I can position things in the center like that. However I would like to stay with my current configuration, well… so far… Or do you want to say that it’s not possible for me to have min-height and min-width with a configuration like this ? All I need is the same container to have min- height/width in IE, as it does in firefox.
H5N1 2008/01/31 12:31 pm

Well, back to your problem nooto:
you have to trick IE just like just said…
for the minimum height you con use:

min-height: 527px;
height : auto !important;
height : 527px;

What this trick do?
Simple: IE doesn’t understand the !important thing so it parse an error and DO NOT apply anything of that line. Other browsers’ rendering engine, instead, skip the content of the "height" declaration and apply the one with "!important". Ie, then, apply the HEIGHT attribute that it use to treat just like a minimum height.

For the minimum width you have to trik it with the "expression" thing:

width: expression( this.clientWidth < 527 ? "527px" : "auto" );

that’s all
Richard Kimber 2008/02/01 4:42 am

This is great, I’d never heard of ‘expression’ before. Thanks.
nooto 2008/02/01 5:09 am

H5N1 , you said :
“Ie, then, apply the HEIGHT attribute that it use to treat just like a minimum height.”
Doesn’t that mean that in IE my div will remain in fixed height all the time? I need it to have min-height if the browser window shrinks below min-size and expand if the window expands.

And about the min-width, I guess I just don’t understand how to use the syntax. As I understand I have to do this :

.center {
     width:70%;
     position: absolute;
     top: 8%;
     bottom: 7%;
     left: 14%;
     min-width:400px;
     min-height:292px;
     height : 82% !important;
     height : 292px;
}

* html .center {
width: expression( this.clientWidth < 400 ? "400px" : "auto" );
}

This still works for Firefox, but not for IE. Maybe you can help me with it? Please notice that I want my div to have size of 70% height and 82% width when browser is in “maximize” state.
Perishable 2008/02/03 9:40 am • Post Author

@nooto: Your expression will not work in Internet Explorer because of the equal width values in the clientWidth argument. When the values are the same in an expression using a “less-than” (<) or “greater-than” (>) operator, IE chokes on it. To correct this issue, simply replace the first width value (the one before the question mark) in min-width expressions such that its value is one pixel greater than the second expression. For example, in your case, you would write:

* html .center {
   width: expression( this.clientWidth < 401 ? "400px" : "auto" );
}

Similarly, for max-width expressions, you need to ensure that the first width value is less than the second expression. For example:

* html .center {
   width: expression( this.clientWidth > 399 ? "400px" : "auto" );
}

As for the min-height struggle, I would start with the basics:

.center {
   min-height: 500px;
   height: auto !important;
   height: 500px;
}

..verify that it works, and then build up from there.

Good luck!
Perishable 2008/02/03 9:46 am • Post Author

@H5N1: Yes, sorry about that — WordPress is a complete monster whenever it sees certain characters.. The best way to avoid gobbled code (at least at this site) is to wrap each line (word, character, whatever) in a <code> element. In the meantime, I am going to consolidate your posts into one, such that the correct code (i.e., less-than sign) is displayed in your original comment. Sorry for the confusion, and thanks for keeping an eye on things!

Regards,
Jeff

« Previous Comments • 1…34567 • Newer Comments »