CSS Liquid

image of the official CSS Liquid

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.


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.


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.


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.


CSS Liquid generator

Use our free CSS Liquid generator tool below to create your own custom design logo or image. Enter your text, select a font, choose a font size, and pick your favorite colors. Hit the Generate button and your logo/image is created and ready to download.


Categories: Technology Fonts