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:
- Understand the normal flow of elements
- Create content containers using the division element and sectioning elements
- Create floating layouts
- Build a flexible page layout
- Build a fixed page layout
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-20: Two-Column Fixed Layout
Figure 7-21: Centered Two-Column Fixed Layout
Activity Files
Download the Chapter Seven activity files.