Min-width and Max-width template

Some problems seem to appear again and again, and one of them is page width. How wide should a site be? Should you adapt to 800px resolution? 1024px? Fully fluid with percentages? Perhaps elastic using em-units? There are lots to choose from. What I’ve found is that there’s one solution that almost always works. You most probably already know it, but I thought it might be helpful for some to have a template you just copy and use.

The idea is to use a fluid width but limit it by using min-width and max-width. As with almost all CSS tricks, we do a little bit of hacking for Internet Explorer 6 (IE6). Link to the working min/max template is available, and an explanation follows.

I’m picking 760px as the minimum width. It fits within a maximized browser window on 800×600 resolution, accounting for scrollbars. Next we need some kind of max-width, and for this I’m going to pick 960px. I could probably go a bit higher but 960 is nicely divisible with a lot of numbers, 3, 4, 5, 6, 8, 10, 12, 15, and 16, making for nice columns (see Gridding the 960). Lastly we need some way to tell the browser to follow the width of the browser window when resizing, and width: 100% does that.


#wrapper {
min-width: 760px;
max-width: 960px;
width: 100%;
}

This assumes that you have a div with id wrapper around all your content.

The above works perfectly in both Firefox, IE7, Opera, and Safari. But (as usual) there’s one culprit: IE6. To solve this I’m going to use the fact that IE allows for javascript execution inside CSS files. Have a look at the code below:


#wrapper {
width: 960px;
width: expression(
(document.documentElement.clientWidth > 962)? "960px" :
(document.documentElement.clientWidth < 762)? "760px" : "auto" ); height: 1%; }

First, the element gets a width by means of a IE expression(). The expression looks at the window width and if it's too wide it sets it to 960. It also limits it downwards to 760 pixels. At last we need to set trigger hasLayout on the element, and I usually use height: 1% for that (zoom: 1 works aswell).

[Update: Martin suggests we add a default width when IE have javascript turned off. Excellent, added it to the example. The default width will be applied in IE if javascript is turned off.]

[Update: Matthjis notes that there is a bug in IE6 that causes it to freeze sometimes when using the same number for the conditional as for the max or min-value. Updated the code to reflect this. ]

(The expression is built up with two tertiary operators, so (condition)? "true value": "false value";, with a couple of numbers in it. Check it, it makes sense.)

The IE6-stuff above will of course not validate (and doesn't work in other browsers), so what we do is enclose it inside a conditional comment. The final min-/max-width example has all the code you need (I've added centering too), but you should of course move the code to an external file.

Happy hacking!

21 responses to “Min-width and Max-width template

  1. Nice template, it’s tricky to get it right sometimes.

    May I suggest a fallback width for IE? Expressions are dependent on javascript to work, and if the user has scripting turned of, the width of the element will be 100% no matter what the width of the browser window is, which may cause very long lines.

    The fix is to have a width-declaration of, say, 960px for this example, before the width-declaration containing the expression.

  2. Emil, you might want to adjust the expression a bit to prevent a nasty bug in IE. It freezes up when resizing the window if you use the expression you described. See this post on Cameron’s site. I encounterd this bug once and it’s definitely a bad bug..
    Keep up the good work.

  3. @Matthijs: Another healthy fix, thanks! (I’ve never encountered the freeze but I trust you that it can happen in some instances). Added it to the template.

  4. @Jens: well, this one is shorter :) That one does a lot of other stuff that you don’t really need. It enables support for max-height among others…

  5. having moved from a 19″ to a 22″ monitor in the past few weeks not only has it provoked a re-evaluation of how i view the web but i’ve developed a habit for browsing in vertically tiled windows (two pages/sites side by side). don’t ask me why when you can use tabs, but nevertheless…

    this raises the question of designing (reverting for some who design at 1024x minimum) in 800x wrappers again. where once i would find an 800x width too small i now embrace it.

    regardless, it does re-emphasize the importance of liquid layouts. this issue is something i’m going to enjoy pondering at some point this summer.

    cheers for highlighting it emil.

  6. This is a very good suggestion, particularly on the max-width end. My only concern about min-width is that more people are browsing with their cell phones and other hand-held devices that have much smaller screens. Also, users tend to disable javascript to minimize downloading time. Setting a minimum width could create access problems for them.

  7. Hi,

    There is a problem with IE 6 in standard compilant mode, it uses an other method to get the width than all other IEs. Therefore I developed this version:

    * html #foo {
    width: 995px;
    width: expression(
    (document.documentElement && document.documentElement.clientHeight) ?
    (document.documentElement.clientWidth > 1265 ) ? “1265px” : “auto”) :
    (document.body.clientWidth > 1265 ) ? “1265px” : “auto”)
    );
    }

  8. @Jeena: The code I posted works on IE6 in standards mode so I’m not sure how your code fixes anything? I always develop in standards mode, so I don’t need fallback in quirks. Other than that your code does exactly the same as the one posted.

  9. Hej Emil,

    There is no document.documentElement.clientWidth in IE 5.x, but there is document.body.clientWidth. The problem: IE6 frezes with document.body.clientWidth in standard compilant mode.

    Sorry I was a little bit confused when I wrote ma last comment :-D

  10. Hi Emil,

    The problem I have found recently with quite a number of hand-held devices is that they are not picking up on hand-held stylesheets. Sadly it seems that many manufacturers are either unaware of this feature, or do not wish to implement it. :(

  11. Pingback: Monotone Monologue 2.6.3
  12. Hi,

    What happened to:
    min-width: 760px;
    max-width: 960px;
    width: 100%;
    Shown in the 1st example, that is not included in the 2nd example (the one for the IE6 fix)?
    Should it be included?
    If so, where?
    Thanks :)

  13. @Rick: See the example in the end, it includes everything you need. You can test that page in multiple browsers to confirm that it does if you want to.

  14. Hey Emil,

    Thanks much for answering this so quickly (esp. since the
    last post here was 1.5 years ago!).
    I just totally missed that link.

    Your solution worked wonderfully, and I sincerely appreciate it! :)

    Rick

  15. And this works? I mean JavaScript inside CSS, what says the W3C-Validator for stylesheet, is that solution CSS 2.1 valid?

Comments are closed.