How to Create CSS Liquid Layouts

CSS Tutorial

Liquid Layouts are used to create clean CSS designs that can expand or contract depending upon the browser size. They are becoming standard for a lot of new website designs, and Web 2.0 highly recommends the CSS liquid layout technique.

Liquid layouts base the dimensions of the columns, header, footer and content areas on percentages. Of course there are some actual pixel sizes constrained depending on your design, but essentially, the width of the web design will be completely designed using percentages based on the browser size.

This CSS tutorial will explain how to create a simple CSS liquid layout. Once you've mastered the concepts of the liquid layout, you can start getting creative and apply it to any type of design your heat desires! Just keep in mind, that CSS liquid layouts are not meant for every type of design, there are places to use it, and places not to.

Before we begin, here are some examples of nice CSS liquid layout designs:

Clear Left Liquid Layout

Site Point Liquid Layout

Now, on to the CSS tutorial:

1. Decide on a basic layout based on the grid system. Use the 800px wide standard, and measure out the amount of space you want between columns (gutters), width of columns and the width of your content area.

2. Convert these standard measurements into percentages based on the pixel measurements. Here is an example of what one type of conversion might look like:

gutter 1- 24px 3%
column 1- 384px 48%
gutter 2- 24px 3%
column 2- 160px 20%
gutter 3- 24px 3%
column 3- 160px 20%
gutter 4- 24px 3%

total 800px 100%

3. When calculating your percentages in a CSS liquid layout, we are not basing them on an exact 800px width, we are basing them on the variable size of a browser the user might view the website in. So, make sure you leave some room within your calculations for errors that may occur. This means rounding one or two of your measurements down a percentage point. One way to do this is to have the percentage width of a gutter set to undefined. For this example, let's set Gutter 4 to the value of undefined.