Creating Selectors to Style the Three-Column Layout

To style the three-column layout and its content, you will use 10 selectors as shown in Listing 21.2.

Listing 21.2. CSS Code Showing the Selectors for Styling the Three-Column Layout

 body {...} h1 {...} h2, h3, p {...} #container {...} #container2 {...} #content {...} #news {...} #nav {...} #nav ul {...} #footer {...} 

What Is a Liquid Layout?

There are four main methods used to lay out web pages. They are

• Liquid layout All containers on the page have their widths defined in percents. A liquid layout will resize when you resize your browser window.

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

• Fixed-width layout All containers on the page have their widths defined in pixels or other fixed units. A fixed layout will not move in and out when you resize your browser window.

• Em-driven layout All containers on the page have their widths defined in ems. The containers will scale according to the user's current browser font size. These layouts will not move when the browser window is resized.

You also can use combinations of the preceding list.