I’m working right now on designing and implementing a Wordpress theme from the ground up. Once it’s done I’ll use variations of it here, on the Apocalypse Blog and on Shiny Things.

The basic layout I want uses three columns. The right-most column has information about me and the blog and short lists of recent articles from the other blogs. The middle column is the article(s). The right column is meta-information, subscription links, tags, stuff that lets you know about this article or lets you navigate around the blog.

There’s also a header with the logo and search box, and a footer with a contact link, a help link, and copyright information.

It’s going well, and I’ll write up some notes about developing your own Wordpress theme once I’m done. But the 3 column thing is really difficult to do well with CSS.

Back in the bad old days you could simply do three columns by making them three cells in a table. Nowadays we don’t use tables for layout, we use CSS, and it turns out that doing columns in CSS1 and CSS2 is not very easy, despite the fact that columns are one of the most-used layouts.

The three column layout is almost as bad as the “three body problem” in classical physics, exacerbated of course by the world’s most used web browser also seeming to barely have a grasp on CSS.

A List Apart presents a clever solution to the problem that uses padding in order to get the contents of the columns to be where you actually want them. I’m using its technique as the basis for my new layout and so far it’s going very well. Even if you’re not trying to solve the three column problem right now, it’s still a very educational read for dealing with CSS.

Via: A List Apart: Articles: In Search of the Holy Grail

[tags]css, layout, columns, three columns, a list apart[/tags]

|  Print This Post