Home > Treasure Chest > max-width with Internet Explorer

CSS: max-width in Internet Explorer

Problem

Internet Explorer 6 does not support the max-width property in CSS.

Solution

We use Internet Explorer's proprietary "CSS language" to solve the problem:

width: expression(document.body.clientWidth > 990 ? "960px" : "96%");

Discussion

IE evaluates this expression with the same logic as some computer language interpreters: It reads: "If the width of the browser's body is larger than 990 pixels, set the width to 960 pixels, otherwise set the width to 96% of the parent element."

To offer this hack exclusively to IE we need to wrap it in a rule that only IE interprets:

* html .wrap1 {
	/* For IE: simulate max-width with IE-proprietary expression() function: */
	width: expression(document.body.clientWidth > 990 ? "960px" : "96%");
	}