How to Create CSS Liquid Layouts

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.

4. Up until this point, we have been going over the process vicariously. Because, obviously, there is no value available to define what a "Gutter" is. So, to replace out gutters we will use the "Left-Margin" attribute instead.

5. Getting into the actual code, now we will make each of the columns described above into their own DIV tags.

Here is the CSS Code:

#column1 { float: left; width: 48%; margin-left: 3%; display: inline; }

#column2 { float: left; width: 20%; margin-left: 3%; }

#column3 { float: left; width: 20%; margin-left: 3%; }

You may have noticed that I added an attribute display: inline to the first column. This is to eliminate a bug that occurs in IE 5, 5.5, and 6. These browsers have some quirks when it comes to margins and floats, and sometimes will cause the column to slip down past the others. This fix should do the trick.

6. Adding Headers and Adding Footers to your CSS float Layout

Place the Header above the other Columns and make sure it is not set to float. The footer will be at the bottom of the header, columns, gutters and will have an attribute to "clear: both". This is so the Liquid Layout will stay above the footer, and the footer will be below the layout design. You HTML will look like this:

Your CSS Code will look like this:

#header { margin-bottom: 10px; }

#column1 { float: left; width: 48%; margin-left: 3%; display: inline; }

#column2 { float: left; width: 20%; margin-left: 3%; }

#column3 { float: left; width: 20%; margin-left: 3%; }

#footer { clear: both; }

7. This is pretty much it! You have created your first CSS Liquid Layout using the Box model. But, one thing to note, is that when you go to place text elements within these columns, you should apply margins to your H2, P, H1, etc. elements rather than the boxes. This will allow some space in between your column edges and the text you put within them. Good Luck with your layout, and don't forget to get creative! Just keep within the standards too... :)