Ok, I'll definitely put something together that's a list of resources and tutorials or write something up on my own. I've been needing ideas for my blog anyway.
Here are two posts from my blog:
2 Column CSS Layout
3 Column CSS Layout
to get you started. I actually do things a little differently now, but everything in the posts will still work and hopefully makes the concepts easy to understand. Probably time to update both posts, though.
Much of what I learned was from
the books of Eric Meyer, particularly Eric Meyer on CSS. The second one More Eric Meyer... came out after I was already pretty good with css, but I assume it's just as good. In each he takes a typical table based layout and slowly works them to be css layouts. The books are a few years old so there may be better techniques now, but I would think they're still good at getting the concepts across.
To get the best use of the books download the code and actually type through each change to see what's happening.
A few tips:
I won't lie and tell you you'll be building a perfect css layout with your first site. You won't it takes some practice, but it gets easier with each site. Try to understand why something works or doesn't instead of just knowing it does or doesn't work. The why will help you solve different problems. The what just helps you solve the one.
Joel is right about the different defaults across browsers. A good example are lists. I forget which does which, but between IE and Firefox one uses margins to indent the list and the other uses padding. So when you code a list you start with
ol {margin:0; padding:0}
and then they should be the same in both browsers. When you want to add some indent pick either margin or padding and add some back in. Lists aren't the only place browsers have different defaults.
The above has led to the idea of css resets, where you zero out a number of elements. Again Eric Meyer to the rescue. He's created what's become the default
css reset. I'm not using it myself since I have enough experience to know what elements I need to reset, but you may find it helpful. At the very least you'll get an idea for which elements will have different defaults across browsers.
One common thing I've seen with new css developer, including myself, is that we gravitate toward positioning to layout a site. Positioning (absolute and relative) is generally not the best way to layout a site. It can become unwieldy in a hurry. Try to master floats though they may seem more difficult to work with at first.
A big part of the trick with css layouts is realizing you don't need to do as much as you think with floats or positioning. Usually you can let everything just lie where it naturally will and then find the few key elements that do need to be floated or positioned.
If you look at most websites you'll see the layout is generally some combination of the following:
header
footer
main content area
sidebar
There may be one sidebar 5 sidebars or no sidebars. You might even think of the sidebars + main content area as a set of columns.
Try to master creating some basic layouts and then start refining what's inside them. When you see a design image, think about how the various parts might fit into one of the elements above.
Not every designs needs to or should fit into the above and if you can find ways to break out of the typically you've probably created a more interesting design. But before you can break the rules successful it's good to know the rules and why they work.