I was just about to post a how-to on this, so I posted it early. You can see it at
http://upwithabang.com/css-how-to.html
Explains how to do cross-browser compatible layouts using DIV tags instead of tables and briefly explains why tables should not be used.
One thing it does not go into (yet) is how to plan out your DIV layouts. I will do that here.
The rational I use for my technique is that the human mind can only reliably track 4 items simultaneously. It can be very confusing to try to remember the organization of 20 cells that are all different sizes and embedded within and without eachother. So I split everything into pairs.
Once I have my layout decided, and my "cuts" of my GIMP image, I put it on paper and draw out pairs of sections that go side-by-side. Usually the top pair is "menu" and "content". So they become my 2 top level DIV sections. Float each div the same direction, left or right. Their total width should equal your page width. Do not apply borders or padding, else they will not appear correct in IE.
After I have chosen my top pair, I pick one of the divs and start pairing down its contents. And I go down cutting up divs until I am done.
Of course, the world is made of more than pairs, but it is a simple start out strategy. Sometimes I may have 5 divs embedded at the same level in their parent div. That is easy enough to track.
I also generally work from the top of the page downwards, trying to make horizontal bands of div pairs.
The best part is, no more tables ! woohoo !
I think my main page at upwithabang.com has only one one small table for the login form which I think is acceptable because it is a data sheet in way.
I'll be adding more to my how-to as time goes on. And actually it isn't even publicly linked yet, but hopefully soon as I think of more topics to cover.
I hope this helps.
.
. You will want to make sure you merge all the layers down first so that you get a single flat image.
