By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,074 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

problem with floats and overlapping divs

P: n/a
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

Jul 20 '05 #1
Share this question for a faster answer!
Share on Google+

This discussion thread is closed

Replies have been disabled for this discussion.