I think part of the problem you're having is because the panes are all contained within table, and all the cells in the table are linked via the colspan element. If you set the width of one of the middle 3 panes to 0 or if you were to set the visibility to hidden, both the top and bottom panes are still set to span 3 columns. This will in itself cause problems.
I find that the one-size-fits-all approach tends to create more issues than solutions when it comes to pane layouts and the best approach I've found is to create a more in-depth pane layout option using a 1-2-1-3-1-4-1 approach. By this I mean that I create one pane that spans full-width across the top followed by 2 panes set to half width each, then another full width followed by 3 panes each spanning a third width and so on.
You can then use the 1,2,3 or 4 pane options without having to worry about anything collapsing properly.
When laying out the rows of panes, try not to use one big table to do this and instead use separate tables or nested tables so there's no use of the colspan element. Ideally you should be using DIV's and even better you should try just using [CONTENTPANE],[CONTENTPANE:1], [CONTENTPANE:2] layouts as these generate their own divs, which can be referenced in the CSS file, which makes the source code that little bit cleaner.
The trick to getting all of the unused panes to "disappear" now lies with the CSS element ".DNNEmptyPane". Set this to the following:
Hope the above helps.