How to Use CSS to Solve min-width Problems in Internet Explorer

By Stu Nicholls

The (X)HTML

<div class="width">
  <div class="minwidth">
    <div class="container">
      <div class="content">
        <h2>{width:50%; min-width:300px;} for non IE browsers</h2>
        <p>This div has a min-width of 300px and a width of 50%.<br />
        The width can be any percentage and the min-width a px or em value.</p>
      </div>
    </div>
  </div>
</div>
<div class="rule">this is 300px wide</div>

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

<div class="width">
  <div class="minwidth">
    <div class="layout">
      <div class="container">
        <div class="content">
          <h2>{width:50%; min-width:300px;} for non IE browsers</h2>
          <p>This div has a min-width of 300px and a width of 50%.<br />
          The width can be any percentage and the min-width a px or em value.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="rule">this is 300px wide</div>

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 transparent background can be seen here.

Example of centered divs

You'll notice that I've used .width {display: inline-block;} in this version to give hasLayout to the outer width. This is an alternative method of applying hasLayout in Internet Explorer.

Conclusion

I hope that this tutorial was relatively painless and that you agree that this method is superior to JavaScript or expressions (even though it uses a few extra divs to accomplish the results). Hopefully, when Internet Explorer 7 is released later this year it will have support for min-width; if it does this method of achieving min-width in earlier versions of Internet Explorer will become more relevant as web designers start to use it with their layouts.

About the Author

Stu's website documents his attempts at understanding and exploring the possibilities of CSS. From standard navigation links to his more bizarre experimental techniques. All of his examples are produced with JUST CSS--no JavaScript, or any other language, has been used in any of the examples. [Editor's note: Prepare to be amazed!] http://www.stunicholls.myby.co.uk/

This article originally appeared on WebReference.com.




Page 2 of 2

Previous Page
1 2
 

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date