Page min-max width that works in FF, IE and all other modern browsers.
xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx
Based on http://www.corephp.com/developer_center/p,14/
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 more about the possibility of roping in IE using 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 would never be the same again.
Code for a flexible layout window with a min-width of 750 and a max of 980 that centers in the window.
<body> <div id="wrap-page"> <div id="content"> <p>xxxxx xxxxx xxxxx xxxxx xxxxx... </p> </div> </div> </body>
#wrap-page {
height: 100%;
max-width:980px;
min-width:750px;
}
#content {
background-color: #dddddd;
}
Well, that takes care of all good browsers, now let’s take care of IE. The following code goes into the head of the page, but I would 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: 750px;}
div#wrap-page { width:expression(((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth : document.body.clientWidth)
> 998 ? "980px" : (((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth) < 768 ? "750px" : "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 750 then set the width fixed at 750. It will stretch until it hits 980 then fix the width at 980. 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%, otherwise the screen will stick in it’s max position on some occasions.
This has been tested on every browser I have on mac and pc and the only browser that doesn’t support it is macIE5x. This includes, Netscape6-8, IE5-6, Camino, Safari, OmniWeb, Opera 6-8, iCab, etc.
If to set the page to auto-center, just add some style to
body {text-align: center;}
margin: 9px auto; text-align: left;
