For me, it’s pretty rare that I develop fluid website layouts, so I’ve not played much with them. However, as part of a recent project, I needed a way to create a fixed-width sidebar and a fluid second column. I started searching around, and came across an old (January 2006) article from A List Apart (ALA). Although it’s old, it’s still extremely useful. It’s fairly aptly titled “The Holy Grail.”
The article explains how to create a three-column layout with fixed-width side columns and a fluid center column. For this particular application, I modified it slightly to use a two-column layout, but I’ve since realized just how powerful and useful the techniques described in the article are.
You can use these techniques to create multi-column fluid layouts or multi-column fixed-width layouts. I haven’t tested to see how much extra work it would take to create four or more columns, but it works beautifully for two columns and three columns.
Why would you want to use these techniques for a fixed-width layout when you could simply use floats? You probably wouldn’t for a two-column layout, as you can just use float: left if you want a right sidebar or float: right if you want a left sidebar. However, for three-column layouts, floats will not allow you to place your content column above your sidebars in the source.
The techniques described in the article allow you to place your content column at the top of your source, then layer both sidebars below your content div within the source of your page. The CSS then pulls the various columns into the correct places.
Post Your Comment