Hour 17: Advanced CSS Layout
Last hour, you learned about basic layout using CSS properties to position content on the page. The position property, the offset properties, the float property, and the clear property can all produce effective layouts, but they don't come close to matching the layout capabilities that Web developers expect.
In this hour, you'll learn
- How browsers calculate the width and height dimensions of a display box
- Which properties can control the dimensions of a box
- What browsers will do if a box's content exceeds the dimensions of the box
- How to layer content upon other content and control the stacked order
- How to replace an HTML layout
with CSS rules
Sample Code
You can download the sample code from each hour as one package or individual files.
- Download all [10K tar.gz file]
- Listing 17.1 [HTML]
- Listing 17.2 [CSS]
- Listing 17.1 with style sheet 17.2 [HTML]
- Listing 17.3 [HTML]
- Listing 17.4 [HTML]
- Listing 17.5 [CSS]
- Listing 17.1 with style sheet 17.5 [HTML]
- Listing 17.6 [CSS]
- Listing 17.1 with style sheet 17.6 [HTML]
- Listing 17.7 [CSS]
- Listing 17.1 with style sheet 17.7 [HTML]
- Listing 17.8 [CSS]
- Listing 17.1 with style sheet 17.8 [HTML]
- Listing 17.9 [HTML]
- Picture of dog for layers demo [JPEG format]
- Listing 17.10 [CSS]
- Listing 17.9 with style sheet 17.10 [HTML]
Web Links
These are the links presented in this hour, given here for easy reference.
- Idyll Mountain Internet
- World Wide Web Consortium
- My personal site (which now uses CSS for layout!
- WebReference CSS layout case study
- Eric Costello's excellent Glish.com site
Updates and Errata
There are currently no updates to this hour's content.
Teach Yourself CSS in 24 Hours was published in 2002 by SAMS Publishing and provides a solid introduction to Cascading Style Sheets.
