Library Web Chic

Setting Width using CSS

A collegue of mine is working on a redesign of our library's website and we were talking today about setting the width of an element. One classic problem that occurs when you layout a page in columns using CSS and relative measures is that your columns can be really squished if your user choose to resize the page drastically. So much so that your page becomes difficult to look at and loses all coherence. One way to deal with this. Beside using absolute measures, is to use the min-width property. This property lets you tell a web browser that a give element can be no smaller than a particular size. This allows you to keep the user from distorting the page too badly. The only problem is that when you choose your min-width you have to base it on some minimum screen resolution. Typically, I base mine on 800×600 because this is the resolution that best accomodates the majority of my users. I know this because of information I collect in my web server logs. The only problem with this is that Internet Explorer in some circumstances chooses to ignore the min-width property. The way I have found to deal with this is to put the min-width line first in the list of properties that I am assigning to a given tag.

Example:

h1 { min-width:600px;
        width:75%;
}

This allows my page to resize for people with a screen resolution greater than 800×600 but doesn't let the page be distorted completely if the user has a smaller screen resolution or decides to use the browser to make the window small. For me this seems to be the best compromise for providing a site that looks nice and consistent but also is relatively liquid from one platform, screen resolution, and browser to another.