Liquid CSS

Decide on a basic layout using the grid system, about 800px wide is good. Measure out the amount of space you want between your columns, width of columns and the width of your content area.

Here is an example of what one layout 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%

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.

Do Us a Favor:
  • Digg
  • Reddit
  • Facebook
  • del.icio.us
  • Mixx
  • StumbleUpon

Leave a Reply

You must be logged in to post a comment.