Save up to 25% on pro security plugins w/ our Security Bundle »
Web Dev + WordPress + Security

CSS Hackz Series: Minimum Width, Maximum Width for Internet Explorer 6

Opening the CSS Hackz series is the infamous CSS-expression hack for achieving minimum and maximum widths in Internet Explorer 6.

Here is how to set the maximum width for IE 6:

#target_element { 	
	width: expression((document.body.clientWidth > 778)? "777px" : "auto");
	max-width: 777px;

Here is how to set the minimum width for IE 6:

#target_element { 	
	width: expression((document.body.clientWidth < 335)? "333px" : "auto");
	min-width: 333px;

Here is how to set both maximum and minimum widths for IE 6:

#target_element { 	
	width: expression((document.body.clientWidth < 335)? "333px" : (document.body.clientWidth > 778)? "777px" : "auto");
	max-width: 333px;
	min-width: 777px;

To implement any of these techniques, simply replace all instances of 777 and/or 333 with the desired target min/max width(s). Then replace all instances of 778 and/or 335 with a value that is at least one pixel greater than your target value(s). This important step is frequently omitted from many min/max-width tutorials, and is required to prevent Internet Explorer from freezing up and crashing. See this comment for additional information.

Alternatively, as Robert Nyman points out, a better approach involves targeting IE 6 directly via externally executed JavaScript function:

window.onload = checkAvailableWidth;
window.onresize = checkAvailableWidth;
function checkAvailableWidth(){
	var container = document.getElementById("container"); = (document.body.clientWidth > 1100)? "1100px" : "auto";

..which should be included via conditional comment:

<!--[if lt IE 7]>
	<script type="text/javascript" src="/js/maxWidthFixForIE6.js"></script>

There are several clear benefits to using this method for achieving minimum and maximum widths in IE 6:

  1. Valid CSS!
  2. Clean separation of behavior from presentation
  3. Vastly improved performance due to JavaScript’s use of event handlers. The CSS expression is recalculated continuously as the user interacts with the web page, while the JavaScript behavior is calculated only when the specified events (i.e., browser resize) occur.

Either way, it’s your choice which method to use when implementing minimum/maximum width for IE 6. If you know of an alternate method of achieving the effect, be kind and share a comment with us!

Next up..

Next in the CSS Hackz Series: PNG Image Display for Internet Explorer!

Don’t miss it!

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
SAC Pro: Unlimited chats.

10 responses to “CSS Hackz Series: Minimum Width, Maximum Width for Internet Explorer 6”

  1. Purpurina 2008/10/23 1:12 am

    I’m trying your hack for maximum-width, inside the container div I have a swf which is set to be 100% width. It doesn’t appear, so doesn’t seem to work with flash objects…
    Any suggestions?

    The hack works fine in the same scenario if I simply remove the swf and add some lines inside the div. Another thing I found is that I have set the margin for container to “0 auto” in order to have it centered, when applying your hack, the div goes to the left, doesn’t remain centered.

  2. Avatar photo
    Jeff Starr 2008/10/26 8:20 am

    Hi Purpurina, you may want to experiment with various JavaScript approaches for facilitating the proper display of your Flash content. A robust library such as jQuery or Prototype should provide the additional tools you need to get Internet Explorer to behave.. I have also seen a few independent (standalone) scripts that may help; try searching for “minimum maximum width javascript ie” for more information.

  3. Avatar photo

    Great post. I wonder if you’ve ever ran into a situation like this, however…

    I need to set a min-width for IE6, but I’ve got a flash object whose width is 100%. Even if I offset the values in the width property like you describe, IE6 freezes up every single time when I resize the window. Any ideas on how to work around that?

  4. Avatar photo
    Jeff Starr 2008/12/17 5:52 pm

    @Ben: This issue may be the result of padding and/or margins applied to the target element. See this article for more information.

  5. Avatar photo
    Chad Garrett 2009/06/27 7:19 pm

    Call me crazy, but I don’t think you have to go to such extremes for min-width. Last I checked, IE ignores width when the width of the content is bigger than the set width. All you need to do (if you have a separate IE6 stylesheet) is this:

    width: 778px;

    And IE6 behaves as if this meant min-width.

  6. Hi Perishable,

    Wanted to let you know that your hack series min-max works! Even though this has been posted years ago! I’m going crazy for the css design I’m doing (without tables), because the background of the divs that only have percentage for their widths gets their background chopped by some other divs that have fixed or specified widths, even the contents is completely chopped when the IE is minimized.

    Hope that you’ll have plenty more(Knowledge!) to post like this one!


    @Chad Garrett,

    There is a difference, as to widths that has a value of *percent and with a fixed/specified one such as *px.

  7. Your previous post in 2007 on this subject was a Godsend. I struggled for more than 8 hours to get the max-width trick to work in firefox and chrome, and your site was the only one I found that fixed my issue.

    Now I’m trying to get it to work in IE 6 and it’s just not working.

    I’m trying to make it so that all images larger than 400px in my blog downsize to 400px. Here’s the code I’m using:

    .post-body img {
           max-width: 400px;
           height: auto !important;

    .post-body img {
           width: expression((document.body.clientWidth > 401)? "400px" : "auto");
           max-width: 400px;

    In firefox, my images appear normally — properly downsized to 400px, but in IE, my images are actually larger and improperly distorted.
    I have no idea what I’m doing wrong. I’ve tried combining the codes, separating them (as seen above), but it’s just not working.

    P.S. the javascript fixes cannot work for me as Blogger does not allow javascript in blog templates.

  8. shitinyoureye 2010/04/15 9:00 am

    LOL: I spent half of my college career studying computer science

    Chad needs to go back to school and learn how to read.

  9. birthday flowers 2010/06/05 11:54 pm

    It works! Great share, thank you. However, IE6 should be completly disabled as we all have problems with IE6 hacks…. wrrr :)

  10. max width in ie6:
    a simpel div container wrapping the
    max value needed like:

    <div id="wrapmax">
    <div id="divinsidewrap">blabla max400</div>

Comments are closed for this post. Something to add? Let me know.
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
BBQ Pro: The fastest firewall to protect your WordPress.
Fall season almost here :)
My greatest skill on social media is the ability to simply ignore 98% and keep scrolling without interacting.
Enjoying this summer, getting some great positive energy. Refreshing and inspiring.
☀️ Pro plugin giveaway! Enter to win 1 of 4 lifetime licenses for our WordPress security plugins, including 10-site Security Bundle!
There is no end to what humans can achieve when they work together.
Excellent (and free) tool to test your site's SSL configuration.
Plugin updates! All of our free and pro plugins ready for WordPress 6.2.
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.