Liquid layouts the easy way

This article explains one method of achieving a successful liquid layout as well as providing basic definitions of liquid, fixed-width and em-driven layouts.

Some definitions

Liquid layout

All containers on the page have their widths defined in percents – meaning that they are completely based on the viewport rather than the initial containing block. A liquid layout will move in and out when you resize your browser window.

Combination liquid and fixed layouts

Similar to liquid layouts, except one or more of the containers on the page have fixed widths.

Fixed-width layouts

All containers on the page have their widths defined in pixels or other fixed units. They are completely independent of the viewport. A fixed layout will not move in and out when you resize your browser window.

Em-driven layouts

All containers on the page have their widths defined in ems. They will be scaled according to the users default browser font size. They are completely independent of the viewport.

You can also use combinations of the above.

The secret of liquid layouts

Liquid layouts are easy to achieve if you follow some basic rules.

  1. work out a basic layout grid before you begin coding
  2. include gutters so that your columns will not spread too wide
  3. use percentage units for widths of all containers and gutters
  4. allow for browser rendering issues (such as percentage rounding)

Step 1 – Start with a layout grid

It is a good idea to start by sketching (on paper or using some imaging software) a rough layout grid.

If you want to achieve a basic three-column layout, your sketch could look like this:

The basic column grid for this mockup is:

column pixel width percentage width
gutter 1 300px 3%
column 1 480px 48%
gutter 2 30px 3%
column 2 200px 20%
gutter 3 30px 3%
column 3 200px 20%
gutter 4 30px 3%
total 1000px 100%

Step 2 – Leaving space

One problem with percentage widths is that they have to be calculated by the browser so there will be some degree of rounding up or down of the percentage measurements. For this reason, it is always good to leave some free space on the page so there is room for error. In this case, you will simply leave "gutter 4" undefined, so there is 3% of free space at the right of the layout.

Step 3 – Making containers

You now have three gutters and three columns. The gutters can be converted to left margins for each of the columns:

These three columns can be converted into <div> containers. You can then apply a width, “margin-left” and “float: left” to each of them:

HTML code

<div class="col1">
	...
</div>
<div class="col2">
	...
</div>
<div class="col3">
	...
</div>

CSS code

.col1,.col2,.col3
{
	float: left;
	margin-left: 3%;
}

.col1 { width: 48%; }
.col2 { width: 20%; }
.col3 { width: 20%; }

Step 5 – Adding the header, nav and footers

It is easy to add headers and footers to this example. The header <div> will naturally sit above these floated columns and gutters as long as it is not floated. The footer must be cleared from the floated item by applying “clear: both”. There are now 5 <div> containers on the page:

HTML code

<div class="sample5">
	<div class="header">
		...
	</div>
	<div class="nav">
		...
	</div>
	<div class="content">
		<div class="col1">
			...
		</div>
		<div class="col2">
			...
		</div>
		<div class="col3">
			...
		</div>
	</div>
	<div class="footer">
		...
	</div>
</div>

CSS code

.header
{
	background-color: #ccc;
	padding: 1em 2em;
	margin-bottom: 1em;
}

.nav
{
	background-color: #ccc;
	padding: 1em 2em;
	margin-bottom: 1em;
}

.col1,.col2,.col3
{
	float: left;
	background-color: #eee;
	margin-bottom: 1em;
	margin-left: 3%;
}

.col1 { width: 48%; }
.col2 { width: 20%; }
.col3 { width: 20%; }

.footer
{
	clear: both;
	padding: 1em 2em;
	background-color: #ccc;
}

Final result

Once you have established the basic layout, you can swap columns, or add borders as needed:

Liquid insanity

When you understand how to set up column widths for liquid layouts, it becomes easy to do more advanced layouts with multiple liquid options: