Mobile Friendly Website

CSSPLAY

Doing it with style

BOXESMin-Width for Internet Explorer

Date : Pre 2006

For IE6

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%).


Support CSSPLAY

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.


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


Free, practical CSS menus, layouts, and examples


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page