From Organic Design
Jump to: navigation, search
Glossary.svg This page describes a concept which is part of our glossary

CASCADING STYLE SHEETS. A web technology to separate content from presentation

Control over minimum & maximum width

In CSS2 the min-width and max-width properties can be used to impose constraints onto an elements width. This is very useful for allowing a site's content area to float in the middle of the page between a pair of margins, but if the clients browser window is too narrow, the content area will not shrink beyond a certain size and instead the margins will shrink. Conversely if the clients window is extremely large, it may not be desirable in terms of the sites layout for the content area to grow beyond a certain width, and instead the margins should grow instead.

Unfortunately IE does not support the min-width and max-width properties, but an IE-only CSS method called expression can be used to create the same effect. Here's an example where the width of the content area is set to 75% of the total page width, but is not allowed to be less than 600 pixels wide, or more than 900 pixels. <css> width: 75%; max-width: 900px; min-width: 600px; width: expression(document.body.clientWidth > 1200 ? "900px" : document.body.clientWidth < 800 ? "600px" : "75%" ); </css> The final line is the IE hack which achieves the same result as the first three lines, but is ignored by non-IE browsers.

Using templates in CSS's

See also