Mobile app version of vmapp.org
Login or Join
Shelton105

: Is there a way to limit the horizational flex of a fluid CSS layout? Example: Currently it does this: <--> Want it to do this: <--|-|--> Meaning the core never gets smaller than say

@Shelton105

Posted in: #Css #WebsiteDesign

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!!

Example of code
#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!

10.01% popularity Vote Up Vote Down

Login to follow query

More posts by @Shelton105

Facebook
--> Facebook Tweet Want it to do this: <--|-|--> Meaning the core never gets smaller than say">Reddit Digg LinkedIn -->

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

 

@Bryan171

Correct me if I got you wrong, but it seems you are looking for min-width and max-width properties.

10% popularity Vote Up Vote Down

Facebook
--> Facebook Tweet Want it to do this: <--|-|--> Meaning the core never gets smaller than say">Reddit Digg LinkedIn -->

Back to top | Use Dark Theme