Doing it with style
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).
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'.
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?
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%).
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.