Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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!

share|improve this question
add comment

1 Answer 1

up vote 4 down vote accepted

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

share|improve this answer
2  
you are not wrong.. that is what he is looking for :) –  Gaby Nov 1 '10 at 22:35
    
Cool, thanks... :-) ...you ROCK!! (+1 and selected as answer) –  blunders Nov 2 '10 at 0:07
    
@Gaby: Thanks for the added confirmation, and the laugh... +1 ...cheers! –  blunders Nov 2 '10 at 0:08
    
I'm glad to help. Thank you all for commenting and voting up :) –  Dave Nov 2 '10 at 4:01
    
i think in your case its min-width. Be careful with fluid layouts. I would not build a layout that could stretch 1000%. I used to have multiple 30inch monitors, and if i opened a site in all of them that streched i would image it would get very weird. Maybe do a max-width:1920; ?? –  Frank Nov 2 '10 at 4:02
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.