Creating a Three-Column Liquid Layout with a CSS Framework

Introduction

On the server side, solid frameworks like Zend, Code Igniter, Rails and Fusebox, to cite a few, are the preferred tools of many developers nowadays (including myself), particularly when it comes to creating full-featured database-driven programs. However, it’s fair to say that the “framework” concept can also be applied successfully to the client-side area, and more specifically in the terrain dominated by CSS.

It’s perfectly possible to create a CSS framework that permits you to build several types of web page layouts without having to code multiple style sheets over and over again. That's the subject of this series of articles. Of course, here I’m not planning to develop a large CSS framework like Yahoo! Grid CSS, because that would be pretty useless, and it’s out of the scope of this series. No, we're going to build something small but useful.

In the initial chapter of the series, I coded a couple of CSS files, where the first one was used to assign default styles to common elements of a web document, and the second one was utilized for constructing a classical liquid design, composed of two main columns.

In addition, the framework included some additional CSS classes that I used specifically for constructing generic containers and title sections across a web document, in this way abstracting this styling procedure.

This instructive journey has just started, though, since in this second installment of the series, I’ll be discussing how to build a three-column web page layout, by means of this CSS framework.

So, are you ready to learn this topic? Then start reading now!