Not being able to use min-max in CSS layouts is a thorn in virtually every designer’s side. I have been testing different theories and complex codes for over 6 months now trying to get something that is both easy to use and is consistent across all modern browsers. About 3 months ago I ran across some information on IE’s conditional statements that made me think about the possibility of roping in IE to use them. After finally getting a min-width to work I knew a true min-max would be possible. After a few more weeks of testing, it finally worked and my world was never the same again!
In this example I will create a flexible layout window with a min-width of 700 and a max of 1100 that centers in the window.
Step 1
Lets start with the XHTML you will need for this example:
<body>
<div id="wrap-page">
<div id="content">
<p>Here is a page that has a min-max set from 700px to 1100px and it works in all modern browsers, including IE.</p>
</div>
</div>
</body>
Pretty simple! Now let’s get to the heart of the layout – the CSS.
body {text-align: center;}
#wrap-page {
min-width:700px;
max-width:1100px;
height: 100%;
text-align: left;
margin: 5px auto;
}
#content {
background-color: #FFFF99;
border: thin dotted #000000;
}
Well, that takes care of all the good browsers. Now let’s take care of IE. The following code goes into the head of the page, but I recommend moving it into an external style sheet just for IE (just make an @import between the [if IE] style statements).
<!--[if IE]>
<style type="text/css">
#wrap-page {width: 700px;}
div#wrap-page { width:expression(((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth : document.body.clientWidth)
> 1118 ? "1100px" : (((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth) < 718 ? "700px" : "99.7%")); }
</style>
< ![endif]-->
I won’t bore you with details, but this basically looks at the width of the client’s window and carries out the statements. If it goes below 700 then set the width fixed at 700. It will stretch until it hits 1100 then fix the width at 1100. I did a ton of testing on this to come up with these numbers. Basically, keep the first number around 18 pixels wider than your intended width, otherwise you won’t get a smooth transition when it hits the min-max point. Also, make sure you don’t set the last variable to 100% or the screen will occasionally stick in it’s max position.
This has been tested on every browser I have on both a mac and pc. The only browser that doesn’t support it is macIE5x. This includes Netscape6-8, IE5-6, Camino, Safari, OmniWeb, Opera 6-8, iCab, etc.