alt131 - 8:34 am on Feb 23, 2012 (gmt 0)
Hi Zafra, and welcome to css,
Thanks for the great explanation, code samples and updates - it's an intriguing problem. Is this happening in browsers, or just in Dreamweaver?
To answer some of your questions, border-collapse is a css property. You can read about it at 17.6.2 The collapsing border model [w3.org] The css table model can be heavy reading, but come back with more questions if you need.
Your problem solving approach (slowly deleting elements) is exactly what is recommended in the CSS Trouble-shooting guide [webmasterworld.com] pinned to the top of the form, so if you are new to coding, well done.
I'm also having problems understanding why the margins are different, but my first thought is whether there is a clue in your statement that merely inserting the div - without closing it - resolves the issue. Unclosed elements should cause problems - not resolve them, so that makes me wonder if there is an error earlier in the code. Have you validated the html?
Also where is <div id="main_image"> located (inside #container, before #banner, etc)? Finally, you've said the "page" has different margins. Do you mean the <body> has different margins, or #banner has different margins - and are you sure this is margins and not padding, widths or positioning?
As Lucy suggests a quick check is to put a border around the elements as that will help identify where elements begin and end. Another useful tool is to inspect the elements using firebug for firefox. The "layout tab" has a diagram that reports the margins, padding and dimensions which makes it easy to see which element and property is actually different.