Making blogCFC a 3 column layout

I saw a blog the other day and liked the layout. If I remember it I will post it here. It was a full screen, large body area, with two columns for all the associated blog bits like tags, menu, comments and so forth. Its a common layout to see on Wordpress and blogger too, and I thought I would give it a shot on SixFive. Here is how I did it.

First set your blog to be a variable width, this used to be 900px for me, then I moved it to 90% in the layout.css

Then you need to decide how wide your two information columns should be. 195px is the default in BlogCFC, So I thought the easiest solution would be to double it to 395px.

Staying with the layout.css, we then need to ensure our content doesn't flow into the newly double sized menu area so change content's right margin to -400px, and blogText margin to 400px. Then its just a question of making the pod layout a physical 2 columns. I decided that a simple float combination of 2 divs at 50% width should do the trick, so I added a few divs in /tags/getpods.cfm first an opening div, floating left: Then a closing div and a clearing dov so that any further content would be laid out correctly. Finally I put a close / open div float right in the loops for displaying the pods. Or for no meta data: You can see the end result css and download the completed getpods.cfm from thelink at the bottom.