Max-Width & Min-Width written 11 years ago

Lorem ipsum...

One of the things i’ve always wanted in a webpage was that the page would resize nicely, such that if the window was small the page would shrink, (but not to a silly size), and if the window was large, then the page would expand to fill the page — but up to a desired width, so that you didn’t end up with one line paragraphs.

This is easily done in Mozilla, just use max-width and min-width, but Internet Explorer is a little tricky. Lots of websites were proud to tell me their “one line hacks” involving the expression feature of IE, but I couldn’t get them to work without causing infinite loops inside IEs small brain.

Anyway, much fiddling later, and many crashed IEs… I present the min-max width page that doesn’t suck! It’s little bits stolen from lots of sites out on the net, but fiddled with so it works nicely. The code that matters is:


    #main 
    {
        ...

        min-width:770px;
        max-width:994px;

        width:expression(document.body.clientWidth > 994? "994px": 
            (document.body.clientWidth < 770? "768px": "auto" ));
    }

What this code does is asks if the window is bigger than 994 pixels, and if it is fixes the size at 994, or if the width is less than 770 pixels it fixes the size to 768 pixels (to account for odd IE death-quirks). If the width is somewhere between the two, the width is set to "auto", and flows nicely between the two values.

This probably won’t validate, but I should have stopped caring about getting the little red x to turn into a little green tick a while back.

Hopefully this shall be coming to a sennir website close to you soon!

← previous entry | next entry → Fri 2nd Jun 2006 - 11:28 | 2 comments | tagged with Programming, Web Musings

 Comments 2 comments made

…………………………………………….. yeah

originally posted by Nina

……………………………………………… yeah

Come on … if you’ve got nothing to say, don’t say it eh?

Leave a reply

Name: displayed next to your comment
Email: will not be displayed
URL: to link back to your site
Comments: Markdown syntax allowed

Notes on leaving replies: