CSS3 Foundations

chapter eight

Creating a Multicolumn Layout

One of the most common layouts in web design is a multicolumn layout. By giving a web page columns, you can separate content into relevant sections, making better use of the space available.

Multicolumn layouts are most commonly achieved using the float property, which technically was never added to the CSS specification for the purpose of creating robust, multicolumn layouts. Its true purpose is actually quite a simple one: to allow one element to flow next to another. Creating multiple columns via the use of float, clear, and other properties is really a “hack”—you’re making use of something in the way it wasn’t intended—but it’s a hack that is needed because CSS, as yet, offers very little in terms of enabling the creation of multicolumn layouts.

  CSS Level 3 sees the introduction of flexbox (www.w3.org/TR/css3-flexbox) and regions (www.w3.org/TR/css3-regions), modules that aim to improve how columns and content areas are created on a web page. Unfortunately, both of these modules are in working draft and have little to no support in modern browsers, so they can’t be used on a working website.

Currently, each element on the Cool Shoes & Socks web page vertically follows the next. In this chapter, you learn the basics of the float and clear properties and then combine these properties along with others to place elements side by side ...