problem with floats and overlapping divs

Hi,

I'm trying to arange the following layout with css (see
http://c0ffee.org/test/index.html & /test/style.css):

On the one hand, I have a (red) main div and a (green) "float: left;"
menu. On the other hand there's a (blue) footer with an (black) image in
it's own (yellow) div. The footer and the image are wrapped together in
one (grey) div.

What I want to achieve is the following.

o If the (red) main div is *smaller* than the (green) menu, the image
(yellow div, black image) should not overlap the (green) menu.

This works with the current stylesheet

o If the (red) main div is *larger* than the (green) menu, the (red) div
should overlap the (grey) div containing the footer and stuff (but not
not the (blue) copyright line)

This doesn't work.

I tried f.e. to set the margin-top attribute of the (grey) div to
-130px, then the (red) main div overlaps the (grey) div, but the
(yellow) image div may overlap the (green) menu.

Does anybody have an idea, what I could do to achieve my goals (should
work with up-to-date mozilla/IE)

best regards & thanks in advance
-- jochen