Layout+Types

In the early days of the Web, most pages online were scholarly works. They didn't use fancy layouts. Typically, they were just text with the occasional picture and table. The first item in the Supplementary Material section for this lesson, written by Google creators Sergey Brin and Lawrence Page, is a good example. Traditional HTML was designed to allow people to create Web pages like that one.
 * Choosing a Layout Design**

Standard Web page With the commercialization of the Web came the desire to create Web sites with some character. Web site owners were looking for ways to create a recognizable, consistent identity for their sites. The concept of the //page layout// was born. A page layout gives each page within a Web site a similar look and feel. You're probably familiar with the components of a page layout. Typically it involves things like a //header// and perhaps a //navigation bar// near the top of each page, one or two //sidebar columns// down the sides of the page, and perhaps a //footer// at the bottom of the page. As you may have guessed, this lesson is about page layouts. In this chapter, you'll learn about three basic types of layouts used in most Web sites today. The three types of layouts are fluid, fixed, and elastic.

The //fluid layout// (or //liquid layout//) is one that //scales// (sizes itself) to the width of the Web browser window. The wider the Web browser window, the wider the page content. There is never any empty space around the page content. The image below shows an example. On the left, we see the page with a narrow browser window. Text wraps to fit within the window so the user doesn't need to scroll left or right to see the text.
 * The Fluid Layout**

A fluid layout On the right, you see the same page in a wider browser window. Again, the content stretches to fit the window. There's no horizontal scroll bar at the bottom of the screen and no empty space around the content. In //fluid layouts//, percent (%) is the primary unit of measure for defining the widths of elements.

A fixed layout is one in which the width of the content is static and doesn't change. For example, the image below shows a page layout that has a fixed width of 760 pixels. When the browser window is narrower than 760 pixels, some content is cut off. The user has to scroll left and right using the horizontal scroll bar at the bottom of the browser window.
 * The Fixed Layout**

A fixed layout On the right, we see the same page with the browser window wider than 760 pixels. The content stays at its width of 760 pixels. Empty space (shown in black above) fills the gap at the left and right sides of the content. Fixed layouts use pixels (px) as their primary unit of measure for defining element widths.

The //elastic layout// is similar to the fixed layout in that the content has a specific width. That width doesn't change as the user widens and narrows the Web browser window. However, unlike the fixed layout, the elastic layout allows elements to scale to the user's preferred text size. Let me explain what that means. All Web browsers offer users some means of changing the size of text in Web pages. For example, in Internet Explorer, users can choose View > Text Size and then a larger or smaller size, as shown at left below. Safari, Firefox, and other browsers offer similar options on their View menus, as shown on the right.
 * The Elastic Layout**

User options for changing text size Somewhere, a clever user noticed that in most sites, increasing the text size did not increase the size of the elements in which that text is contained. In some cases, text can become too large to wrap within its container. Instead, the text spills out and overlaps neighboring text.

Text is too large for containing elements The creation of the elastic layout solved this problem. As the user increases and decreases the text size, the elements that contain the text increase and decrease with it so text doesn't spill out of its containing boxes. A page with an elastic layout might look like the example at left when viewed at normal text size. If the user increases the text size, the text grows. But so do all the elements that contain that text, as in the example at right. The layout looks the same, proportionally, regardless of the user's preferred text size.

Elastic layout Many modern browsers have switched from using a Text Size method of magnification to a Zoom method of magnification. The Zoom method magnifies the container, which allows fixed-layout sites to look and act more like elastic layouts. That's a big plus for older sites that would fall apart when the user magnified the text. In terms of how you write the code, the only real difference between fixed and elastic layouts is that in a fixed layout you rely mainly on the px (pixels) unit of measure to define widths. In the elastic layout, you rely more on the em unit if measure, where 1em equals roughly the height of a line of text (16px at the default font size). It sounds complicated but it's really not. We'll use the em unit of measure for many of our working examples.