CSS Liquid

CSS Liquid in use

What is a CSS Liquid Layout?

liquid (lik-wid): a substance that flows readily and takes the shape of its container.

Liquid layouts are layouts that fill the browser window. Rather than set a fixed width, they allow the user to control the display, and therefore are not subject to the ongoing question of which screen resolution to support.

Purpose

The purpose of CSS Liquid is to promote the use of liquid layouts in CSS based design. There are a lot of gallery websites out there, and most of the websites featured are less than 800 pixels wide, while a few are 1000 pixels wide. Liquid layouts are often avoided, and with good reason: it’s hard to design the appearance of a website without control over the dimensions. That being said, CSS Liquid exists to showcase those websites that have succeeded at liquid design, and serve as a resource to those exploring it. CSS Liquid includes layouts that are purely liquid (also called fluid), mixed liquid and fixed, elastic, and progressive.

Disclaimer

Liquid layouts are great. This is not to say that fixed width layouts are bad. They are just too common. CSS Liquid is not a place to defend or attack liquid or fixed layouts; there are enough places for that kind of discussion.

Criteria

All sites on CSS Liquid meet the following criteria:

  • Valid XHTML/HTML4 and CSS design
  • No table based layouts
  • Attractive design and clean code

Any form of mixed layout that has at least one variable-width column classifies as a liquid layout. Elastic (em) width sites are also accepted.