7. Flexing Your Layout Muscles

Although we’ve been encouraged for many years to use CSS to control the layout of our pages, the CSS 2.1 mechanisms that can be used for layout are quite slim. Absolute positioning is not used often by most developers since it’s too rigid; floats have been used extensively, but were never really meant for full-page columnar layouts, and are limited in what effects they can produce. CSS3 introduces a number of new layout mechanisms that will make the building of multi-column layouts much easier and also allow for creating complex layout behaviors that simply can’t be accomplished with the properties and techniques of CSS 2.1. While these techniques are still somewhat experimental, this chapter will get your prepared for how layouts will be built in the future, as well as introduce you to a few practical ways you can use the new flexible box layout model now.

What You’ll Learn

We’ll be creating multi-column layouts for the entire page, as well as widgets on the page, using these pieces of CSS3: The flexible box layout model The box-sizing property We’ll also preview two of the upcoming layout systems in CSS3—template layout and grid positioning.