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.
- 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
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
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
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.
- Each week the Creare Group produce video tutorials for SEO and tips and tricks for the web design industry.
- We offer nothing but the highest quality SEO, Social Media Optimisation And PPC services to businesses in London
- Register Domain Name
- web designers company providing number 1 services for website design and SEO
- IT Support Bristol
- Web Design
- Website Designers - Compare quotes from local website designers
- Top Website Design Company CWD.
Get the Perfect Website! - Web Design Birmingham - Expert web design, marketing and support
- UK's white label Web Design specialist
- Affordable Web Design from EU Design Studio
CSS play Testimonial
"The 
web site uses
CSS play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."
Damon Clark - Brandwidth