I've been having some trouble creating CSS-based layouts that include 3 columns, a header, and a footer. For example, in what should be a fairly simple layout (here):
http://www.etvlog.com/log/inProgress...herlayout.html

... I can't figure out why the top of the "right hand column" doesn't line up by default with the other two columns. I've even given it additional width, in case the borders or margins were adding pixels, but that doesn't seem to be the issue.

In order to address an issue where footers don't clear multiple body columns properly, I've added a hack from this page:
http://www.shauninman.com/plete/2006...nline-absolute

... but I wonder whether a simpler and more elegant solution exists. I'd also love to know why this actually happens.

A few other questions, such as: how would I add some "cell" objects to the middle column, without skewing the rest of the layout? For instance, if I wanted the middle column to contain something like a two-row table, with two cells in the top row and one cell in the bottom row?

Similarly, how would one adding two "rows" to the header, and having one column spanning both rows on one side?

Perhaps the answer is to think of each of these "cells" as a separate div? But it seems that things could get even uglier that way.

Thanks for sharing your thoughts.