In the process of building this blog, I keep hitting my head against CSS. It is a while since I did any programming, and particularly web programming, and it isn't as enjoyable as it once was.

Trying to be smart

I decided to be really smart do a table-less layout with xhtml and css for the blog engine. Effectively this means that everything sits in <div> tags and the CSS tells the browser where to put what. Sounds good - no messing with trying to get all the bits to line up in tables etc.

Trouble is that it didn't work as easily as I expected.

The curse of margins

The first problem that I hit was that the various blocks didn't fit together and all had gaps at the top. After hours of messing with Firebug and DOM Inspector, I finally realised that objects have a margin at the top which overlaps with the top of a <div> box, and prevents the box from fitting snugly with the box above.

After that eureka moment, I re-defined the CSS for the problem elements, and everything looked fine again.

Shrinking boxes

Then I moved on to the blog index / archive pages......

That should have been simple enough, but once again things just didn't fit together. The shorter column simply didn't have background for the full height for the section.

After a bit of research it seems to be a common problem. Fancy that!

Solutions

There are all sorts of ugly methods, but it turns out that apart from going back to a table based layout (I was very tempted), a neat trick is to leave the <div>'s be, but make them transparent. This takes care of setting the container size nicely.

Then, to get a background, put an position:absolute <div> underneath the column.

A neat blog about this is Ed Elliot's.

Bottomless

Using Ed's tricks plus a bit of messing with padding, I now have neat looking columns, but on pages where the content is short the footer is no longer stuck to the bottom of the page.

Not done any reasearch yet - too busy with the contact code. Anyone have any suggestions?

Why?

It seems to me that having a set of equal height columns in a page is completely fundamental in designing pages. Why are we in this situation where we can't do the basics without resorting to all manner of acrobatics.

While searching for solutions, I came across loads of pages which where precisely about this problem. I certainly hope that CSS3 has an off-the-shelf mechanism for doing this.