2.2 Liquid Layouts

Fluid or liquid layouts tend to use percentages for specifiying widths. As these widths are therefore based upon percentages of the current browser window size rather than the initial containing block, they flex with the size of the window, even if the current viewer changes their browser size while viewing the site. Liquid layouts allow a very efficient use of the space provided by any given web browser window or screen resolution. They are often preferred by designers who have a lot of information to get across in as little space as possible, as they remain consistent in size and relative page weights regardless of who is viewing the page.

Benefits

  • Liquid layouts expand and contract to fill the available space, resultiong in less white space;
  • As all available space is used, this allows more content to be displayed on larger monitors while still rendering fine on smaller ones;
  • Liquid layouts provide consistency in relative widths, allowing a page to respond more dynamically to customer-imposed restrictions like larger font sizes;
  • Design typically scales with the browser window as needed;
  • Gives a bit more control to the user.

Drawbacks

  • Liquid layouts allow for very little precise control over the width of the various elements of a page;
  • Calculating percents may be tough due to browser rounding errors;
  • On wide screens they can result in columns of text that are either too wide to read comfortably or too much white space;
  • Problems can occur when a fixed width element such as an image is placed inside a liquid column. If the column is rendered without enough space for the image, some browsers will increase the column width, disregarding the designer's instructions, while other browsers will cause overlaps in text and images to achieve the correct percentages.

In our stylesheet we could have:

#wrap		{width: 100%;
		margin: 0 auto;
		padding: 0;
		text-align: center;
		background-color: yellow;}

#header		{background-color: orange;}

#leftcol	{display: inline;
		float: left;
		width: 20%;
		margin-left: -80%;
		background-color: red;}

#content	{display: inline;
		float: left;
		width: 60%;
		margin-left: 20%;
		background-color: blue;}

#rightcol	{float: left;
		width: 20%;
		margin-left: 0%;
		background-color: red;}

#footer		{clear: both;
		background-color: orange;}

The HTML markup would be just as before and note again we are including the main content section before the right and left columns, and using float and negative margins to display the left column, main content and then right column in this order. It is good for search engine optimisation (SEO) to have the important information nearer the top of a html document. The only real difference here is that the widths have been specified in percentages. This would look like this: (try resizing the window):

Partial Liquid Layouts

A combination of fixed and liquid layouts is also possible, whereby some of the page structure is fixed and some is liquid, meaning that when a browser window is resized, less important items can move but the important area(s) remain constant. This is my preference actually. Using liquid layouts for large blocks of text can result in the text being either unreadable on small monitors or too lengthy to read comfortably on large ones. I prefer to make the main page columns fixed widths but make headers, footers, and side columns more flexible to take up the remaining space.