By Simon Willison

CSS tricks in both dimensions

By Simon Willison

Cameron Adams and Dave Shea both came through recently with some smart new CSS techniques.

Cameron’s trick, entitled Resolution dependent layout, provides a welcome new angle to the long running debate over liquid vs. fixed width designs. The standard dilemma is that fixed width designs waste browser real estate, but liquid designs can lead to unreadably long lines of text. The CSS specification provides a solution in the form of the max-width property, but this is unsupported by Internet Explorer (barring clever but invalid expression hacks) and can still leave liquid designs looking less than optimal in uncommonly wide or narrow browser windows.

Cameron’s solution is ingenious: use JavaScript to detect the size of the window and swap in different stylesheets depending on how much space is available. In his example, a three column layout element is dynamically switched to use a single column when the browser window is resized to below a certain width.

Using JavaScript to modify a page based on its width is not a new idea: I’ve seen it used to serve larger advertisements in a page gutter before – but altering the actual page layout seamlessly is definitely an interesting twist on things. Best of all, Cameron’s JavaScript is clean and unobtrusive and should be easy to adapt for other purposes with minimum effort.

Dave Shea on the other hand has been working vertically: in min-height: fixed; he takes on the sticky problem of design elements which need to maintain a certain height, but expand when their content outgrows them. Dave’s eventual solution is a veritable tour de force of CSS browser hacks, with workarounds for IE on Windows and Mac, Opera 7 and Safari! The trade-offs involved in using so many hacks are discussed intelligently in Dave’s comments. As always, I would caution designers to make sure they are fully aware of the hacks in use and what they do before applying the technique to a live project.

  • Rizwan Reza

    Thanks for sharing!

  • Eii, ingenius or out, it’s flawed… I’m currently using a 400mhz Celeron (I know, it’s pathetic) running MSIE (even worse), and it lags when I resize. Had he done it properly, it’d go:

    if (width < 800 && prevWidth > 800)

    else if (width > 800 && prevWidth < 800)

    As I see it, EVERY SINGLE pixel change when resizing causes the style to be changed, and that lags me on this computer… should really cache what it is BEFORE resizing happens (ie on init, or at the end of the function called onresize), and then only if it’s crossed the border (800px) should it do anything… cool nonetheless though.

    just my 2 cents

  • I’ve done just that on a few of my pages for quite awhile. heres one of them:

    if the script finds that the screen size is bigger than 800×600
    than I include an iframe to include another page of extra info on the far right side.
    If they have an 800×600 than I include that extra info page as a link on the side.

    This way I can keep a fixed width for all my pages and do not lose out on browser real estate that is of great value.

  • Anonymous One

    I really don’t understand what’s so surprising about this. It’s only common sense that several stylesheets can be designed for several resolutions.

    The problem lies not in what is obvious, but in the extra time spent creating those stylesheets. So why not make a nice “fluid” website from the start?

  • I created a very basic working example that you can look at the source code:

    The iframe includes this other file:

    If you save all this to your desktop and go to line #189 and change the value to false, you can see in action.

    It is very solid, although it does not take into account the 2% who disable JavaScript.

  • spags

    You still alive Simon?

  • Tim

    I still can’t see what’s wrong with fluid. We all need a drink now and again. So, I’m off for some more fluid ;)

  • Uhh, Simon? Where’d ya go?

  • I am in the process right now (Mar.2006) of developing a new site.
    Again, since there are still some using the smallest of screen sizes of 800×600 I made this the default size when designing. However like is mentioned before there is screen real estate that is being wasted. So by testing for some of the sizes you can add ads and or other extra information. I’m using the same info as noted above. Tell me what you think? You know, one has to know the box really well before one can step outside the box.

Get the latest in JavaScript, once a week, for free.