Creating a Liquid-Layout Grid

When creating a liquid layout, it is important to include vertical gutters so that the content columns do not butt up against each other. All widths should be set in percentages so that the entire page can be resized as a single unit, depending on the size of the browser window.

Percentage widths are calculated by the browser, so there will be some degree of rounding up or down of the measurements. For this reason, you should leave some undefined space so that there is room for possible rounding errors.

For this layout, the total width of the containers and their padding adds up to 100%. However, the padding on the right side of the #nav has not been included, so there is 3% of undefined space within the overall layout. The measurements are shown in Figure 21.1.

Figure 21.1. Diagram of liquid-layout grid.