I'm having a problem inserting two DIV columns (left and right) inside another DIV to get a result like the following image:


What happens is that the DIVs extend outside of their containing block and into the footer below, rather than pushing it down, like so:


But, when I replace the two DIVs with some placeholder text, that works OK, with the footer being pushed down, as in:


I would have thought that wrapping the two DIVs (which are absolute positioned) in a container DIV would make other block elements flow before and after them, but apparently not, and I need to understand CSS a bit more.

I've reduced the problem to almost its simplest form, and by looking at the small amount of source, I'm wondering if anybody can tell me where I might be going wrong?

Thanks in advance for any replies.