Most web developers are used to working with tables. We have used tables for layout purposes for many years now. Primarily because its easy to visualise. The editors can give you a accurate WISIWIG representation. But times change, and the latest from all the web gurus is to use CSS Layout, with DIV elements. This is great. You get good flexibility. But like all things there are pros and cons to everything. One of the things I battled with is collapsing Empty DIV elements. In a table, the cell collapses nicely, but with DIVs that's a little different.
I am going through a process of redesigning my DNN skin for CSS layout as opposed to a Table layout. I hit many walls and problems when trying to do this. Your whole thinking has to change. For those who hate and despise table layouts, let me just say this. There are certain benefits to table layout. Like everything, there are pros and cons.
Of the many that I faced, collapsing DIV elements was one of them. In traditional cells and tables, if the table, row, cell was empty, it would just collapse. But not so in a DIV. What you potentially end up with is large amounts of white space.
So I browsed the net and found a few solutions.
First thing to do is to add a display:inline property to your DIV. Then add the overflow property and set it to hidden. Most of the tutorials on this subject suggested this method. So I tried them, and guess what, they did not work. I tried about a hundred other thing, until I came across a very obscure example.
The thing that did it, was to add a blank comment in the div. <-- -->. When I did this, my empty DIVs collapsed like empty table rows Fantastic.
Go figure. Who would have thought such a weird workaround was possible. But anyway, hope this helps you in your tableless layout efforts.
If any have other suggestions, I would be glad to hear from you.