Min-Width for Internet Explorer
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.
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.
- For QUIRKS mode IE
- For STANDARDS COMPLIANT mode IE
- For STANDARDS COMPLIANT mode IE centered layout
- For Mac IE5 - centered with thanks to Bruno Fassino http://www.brunildo.org
- 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
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.
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.
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%).
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.