Example:
Currently it does this: <-->
Want it to do this: <--|-|-->
Meaning the core never gets smaller than say 900px, but the core stretches on forever if it's bigger than 900px. Note, currently it's a 3-column, and the sides are fixed, it's the center that grows.
It's also be cool if I could control the max flex: |<--|-|-->|
Meaning the page would not get smaller than 900x, but not larger than 1200px
...so, maybe none of this is possible, or it's crazy easy -- but I've searched high and low for an example, or CSS specs on how to do this, and no luck so far.
Thanks!
UPDATE:
Thanks to Dave, I was able to find a solution... :-) ...thanks Dave!!
#wrapper {
width: 960px;
width: expression(
(document.documentElement.clientWidth > 962)? "960px" :
(document.documentElement.clientWidth < 762)? "760px" :
"auto"
);
height: 1%;
}
-- OR here's the full HTML with inline JavaScript and CSS --
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Example of max- and min-width</title>
<!-- You should of course use external CSS-files, not inline as I use in this example... -->
<style type="text/css">
#content {
border: 1px solid red; /* For clarity, remove at will */
max-width: 960px; /* Corresponds to 1024 with scrollbars */
min-width: 760px; /* Corresponds to 800 with scrollbars */
margin: 0 auto; /* Center the block */
width: 100%;
}
</style>
<!--[if IE 6]>
<style type="text/css">
#content {
height: 1%;
width: 960px; /* Fallback width if javascript is off */
width: expression(
(document.documentElement.clientWidth > 962)? "960px" :
(document.documentElement.clientWidth < 762) ? "760px" :
"auto"
);
}
</style>
<![endif]-->
</head>
<body>
<div id="content">
<p>Example Content...</p>
</div>
</body>
</html>
SOURCE: Friendly Bit, Min-width and Max-width template
NOTE: Stack Exchange... Rocks!
