1

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!

1 Answer 1

4

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

5
  • 2
    you are not wrong.. that is what he is looking for :) Nov 1, 2010 at 22:35
  • Cool, thanks... :-) ...you ROCK!! (+1 and selected as answer)
    – blunders
    Nov 2, 2010 at 0:07
  • @Gaby: Thanks for the added confirmation, and the laugh... +1 ...cheers!
    – blunders
    Nov 2, 2010 at 0:08
  • I'm glad to help. Thank you all for commenting and voting up :) Nov 2, 2010 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, 2010 at 4:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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