Chapter 9

Creating a Multicolumn Layout

As has been evident throughout the previous chapters in this book, CSS has made major advancements in almost every area, comprehensively tackling each and every issue, both big and small. There is one area, however, that CSS has been rather slow to master. Most of you are painfully aware that the area I am alluding to is, of course, layout.

This chapter begins by addressing why previous and current layout solutions do not fit the bill, before introducing each of the new layout modules proposed in CSS3. One of these new modules is Multi-column Layout, which I discuss in depth in this chapter, with the others to be addressed in the following chapters.

The Multi-column Layout module provides a method of defining columns in the stylesheet, allowing your content to flow into these columns dynamically, without the need to touch your markup. I describe how to create a multicolumn layout using the various new properties on offer, which provide control over the size and number of columns as well as spanning elements and decorative rules to separate the columns.

The Evolution of Layout Tools

CSS has famously always lacked a true layout mechanism, with web designers slowly innovating and finding new ways to utilize the tools available for creating complex and maintainable layouts.

The first website that I ever created (calling it a website is generous indeed) used frames to form the layout: a sidebar frame, a header frame, and a frame for the content. ...

Get CSS3 Pushing the Limits now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.