Min-Width for Internet Explorer

Pre 2006

Tutorial on Web Reference

Information

I set myself a challenge today (11th May 2005) and that was to find a method of getting a true min-width in Internet Explorer.

I have seen CSS hacks that almost make it, javascript, and CSS expressions, but nothing using pure CSS that gives a true emulation of what happens in other browsers.

After several failed attempts and a couple of hours of trying I have come up with this method, which I hope you will find 'interesting'

PS. If you want it to work in IE5.01 as well then change the display:inline-block; to float:left; (not quite as elegant a solution as you may need to clear the float).

Here it is ... at last.

  1. For QUIRKS mode IE
  2. For STANDARDS COMPLIANT mode IE
  3. For STANDARDS COMPLIANT mode IE centered layout
  4. For Mac IE5 - centered with thanks to Bruno Fassino http://www.brunildo.org
  5. For Mac IE5 & transparent Allows min-widths greater than 960px, with thanks to Bruno Fassino http://www.brunildo.org

It goes without saying that you need to be browsing with Internet Explorer to see the effect. All browsers that understand min-width will also see it working without the need for 'hacks'.

How it's done

Quirks mode

This method relies on IE being in quirks mode and use the faulty box model to get the right effect. It uses two divs, an outer div that controls the percentage width AND the minimum width, and an inner div which holds the content.

The outer div has a width equal to the percentage width and a right (or left) border equal to the minimum width.

Outer div

outer div

The inner div has a width of 100% of the outer div PLUS a negative right margin (or left margin if using a left border) equal to the minimum width so taking up ALL of the outer div percentage width.

Inner div

inner div

As the browser window is resized the outer div percentage width reduces to suit UNTIL it shrinks to the border width, at which point it will not shrink any further. The inner div follows suit and also stops shrinking and the outer div border width becomes the minimum width of the inner div. Easy huh?

Standards Compliant Mode

This is identical to the above except that it requires an overall container which has a width of 90%. The outer div will just need a border width as its total width will be the width of the overall container (90%).



Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.



Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.


Free, practical CSS menus, layouts, and examples

Follow CSS play


Facebook   Twitter   Facebook Fan Page