Chapter 10 - Creating Positioned Layouts

In a standard HTML document, the default positioning of elements is generally top to bottom and left to right. This basic display scheme frustrated designers who wanted to build more complex layouts, resulting in the use of tables as a page layout tool. The CSS2 positioning properties let you build Web pages without using cumbersome tables to control page layout. With positioning you can choose the exact placement of elements within the browser window. The new generation of browsers offers more robust support for positioning, as you will see in the examples throughout the chapter.

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

• Understand basic positioning concepts
• Apply CSS positioning properties
• Build a page layout with positioned elements

Form Examples
Figure 10-2: Offset box positioning
Figure 10-3: Specifying element width
Figure 10-4: Nested positioned elements
Figure 10-5: Fixed positioning
Figure 10-8: Stacking levels in the browser

Exercise Files

• Download the file ch10files.zip to work on the hands-on projects.

To Top


Principles of Web Design by Joel Sklar www.joelsklar.com