Which DW? Which Template (fixed or liquid)? Where are you seeing this gap - Design view, Live view, or preview? Have you made any mods to the template or are you seeing this gap right from the new file's creation?
I'm using DW CS4. I can see the gap in all versions of the 3 column header and footer template (fixed, elastic, liquid and hybrid). I have not made any changes to the templates and I am looking at the template in design view (using either the visual aids or by clicking on div#mainContent in the tag selector) but it is also visible in the live view if I add coloured backgrounds to the container and main content divs.
I don't have access to CS4 so cannot really determine what might be causing the gap. My suspicion, however, is that it's an escaping margin that is pushing the two divs apart. Try this - run a 1px solid border along the top of the main content div, e.g.,
border-top:1px solid white;
Does that gap go away with the border in place? If so, then the top margin on the first child of that div is the culprit. The first child in that content div is usually an H1 tag.
Many thanks for coming back to me, Murray.
Your suspicions were correct. A border at the top of the mainContent div has moved the div to flush with the header div (less the border).
Could you help my understanding further please? If the cause is the margin in the h1 tag in the mainContent div, why do I not get the same result by simply removing: <h1> Main Content </h1>? Does the <p> tag have a similar margin?
Yes, the p tag has a similar margin, as does a ul tag, and other such block containers. For this reason, some people recommend use of 'CSS reset' rules where all of those margins are set to zero. Personally I don't do that. It's easer for me to just deal with the few instances where the margin 'escapes' than to reset everything.
Thanks for your help, Murray.