Scalable layouts
To create layouts that expand and contract proportionally when a user changes the text size, use ems or percentages to position and set the dimensions of page elements, like div boxes, paragraphs, headings, and lists. You may still need to use pixels, for example, to define borders and images, and to position images precisely. (When a user reduces the text size, images should be clipped to prevent them from displacing other elements in your layout when it contracts. Patrick Griffiths shows how to deal with image overflow so that your layout will contract gracefully.) I will discuss two types of scalable layouts: liquid and elastic.
Liquid layouts
To create a liquid layout, leave the width of the main content area unspecified so that the text flows to fit the width of the browser window. Use ems or percentages to set margins, padding, and leading. Here is an example of a liquid layout:
Elastic layouts
To create an elastic layout, use ems or percentages to set the width of the main content area. I used this elastic layout for this Web page:
I used ems to set the widths of the banner box and the box containing the menu and content boxes, and percentages to set the widths of the latter two boxes. I also used ems to set margins and padding.
To find out more about creating elastic layouts, see Griffiths's article in A List Apart. Also, see Griffiths's Elastic Lawn design in the CSS Zen Garden.
For more information about making your Web sites more accessible, see the Web Content Accessibility Guidelines, developed by the World Wide Web Consortium's Web Accessibility Initiative.