OK, I've made the changes you suggested and now I have some questions.
I reduced the fixed height of #content-2 and the footer div then overlapped under #content-2-1, I increased the height and obviously the footer moved down below #content-2-1 and displayed OK. My question is how do I have the footer div stay below #content-2? I'd have thought the clear:both; rule for the footer would have done that?
Also, how can I have #content-2-1 expand vertically according to how much text/content is in the div? I tried setting the height of #content-2 to 100% so that it could expand in relation to #content-2-1 but that didn't work.
Finally, #content-2-1 seems to have padding around the text, it looks to be about 10 pixels above and below, but I haven't set any padding for it?
Thanks again for your help.