Chapter 7 - Page Layouts

In a standard HTML document, the default positioning of elements is generally top to bottom and left to right. In the past, web designers used tables to create multiple-column layouts and gain more control of their page designs. HTML tables are not intended for page layout and are no longer in favor, although they still exist on many web pages.

Modern web designs are built using the CSS layout capabilities. As you saw in Chapter 6, you can use floats to position content elements on a web page and move them out of the normal flow of elements. In this chapter, you will learn how to expand on this concept by using floats to create multicolumn web pages that can either be flexible based on the browser size and screen resolution or fixed to a definite width. You will see how to resolve common float problems, and you will get a chance to build both a flexible layout and a fixed page layout. In Chapter 12, you will learn to use these techniques with media queries to build responsive web page designs that adapt to different device types, including smartphones, tablets, and desktop monitors.

When you complete this chapter, you will be able to:

Layout Examples

Figure 7-3: Web Page with Multiple Content Elements

Figure 7-4: Web Page with Multiple Content Elements, Filled with Content

Figure 7-5: Floating and Nonfloating Elements Make Up a Web Page

Figure 7-6: Floating Elements Extends Outside of Containing Element

Figure 7-9: Floating Element Within a Float

Figure 7-14: Flexible Layout

Figure 7-20: Two-Column Fixed Layout

Figure 7-21: Centered Two-Column Fixed Layout

Activity Files

Download the Chapter Seven activity files.