A summary of CSS-based layout techniques

Over the past few months, I've mentioned in my weblob a number of new and exciting layout techniques that have surfaced. Below is a summary of the traditional CSS-based, tableless layouts, and these new techniques that you as a web designer would hopefully consider while planning a standards-compliant site. I've also included what I believe are the pros and cons of each technique, links to examples, and where possible have credited their author and/or origins. This summary is a WIP.

I've used the word 'viewport' in the context of the browser size and not screen resolution.

If you can't figure out the rendering differences between the techniques, you may want to try each at different viewport sizes (increase your screen resolution and/or browser width) and at different browser text sizes. Use this bookmarklet (drag it onto your Bookmarks Toolbar or into your Favourites) to easily resize your browser width.

I'd like to keep this list fresh, factual and unbiased - please comment or drop me an e-mail if you have something to contribute. And no debates over personal preference, please.

1. Fixed: layout is determined by absolute dimensions, typically to fit a viewport with a width of around 800 pixels. With 1024x768 resolutions gaining popularity, there is a growing trend to design exclusively for this size.
   
   Pros: Easy to implement.
   Cons: Supports single scenario only. Typically breaks when browser text size is adjusted.
   Examples: news.com (800), download.com (1024), theonion.com (1024), macromedia.com (800), 24sata.hr (1024), bmw.com (1024)
2. Liquid (aka. Fluid): layout is determined by relative dimensions, typically percentage values to fit 100% of the viewport.
   
   Pros: Accommodates all viewports. Larger volume of content is viewable without scrolling. Scalable and flexible for forward-compatibility.
   Cons: On wide viewports, readibility suffers from long lines of text.
   Examples: wired.com, sercotransarctic.com
3. Resolution dependent (by Cameron Adams): varying layout according to viewport width. When the width is adjusted, the layout is dynamically adjusted accordingly. JavaScript required, but degrades gracefully.
   
   Pros: Full control over how changes in the viewport have an effect on the content. Flexible.
   Cons: Time-consuming, more maintenance required.
   Examples: Author's demo, rammstein.com, smh.com.au, microsoft.com (last two require browser reload).
4. Elastic (by Patrick Griffiths and more recently, Roger Johansson, and again by Douglas Bowman): resizes to browser font size. Similar to Opera's zoom function.
   
   Pros: Takes the user's preference into account. Flexible. Accessible.
   Cons: Time-consuming, more maintenance required. Difficult to make images scale.
   Examples: mozilla.org, yahoo.com, aol.com, Elastic Lawn (CSS Zen Garden)
5. Jello (by Michael Purvis): a combination of Fixed and Liquid.
   
   Pros: Scalable and flexible for forward-compatibility.
   Cons: Steep learning curve.
   Example: Author's demo.
6. Progressive (by Alessandro Fulciniti): a combination of Fixed and Liquid. A Fixed layout under and over certain pixel widths, while Liquid inbetween. JavaScript required, but degrades gracefully.
   
   Pros: Scalable and flexible for forward-compatibility.
   Cons: Steep learning curve.
   Example: Author's demo.
7. Constrained (aka. Untitled): Liquid layout up to a maximum pixel width.
   
   Pros: Scalable and flexible for forward-compatibility.
   Cons: uses IE's proprietary CSS rule to emulate max-width property.
   Example: This site.