No replies
Darko74's picture
Last seen: 10 years 37 weeks ago
Timezone: GMT+1
Joined: 2010-02-10
Posts: 7
Points: 11

I can't get to apply top and bottom margins correctly to nested divs.

This is the HTML code:

<div id="footer">

and this, the CSS:

#footer {
    background: url(../images/backgnd_mainbody_top.png) top no-repeat;
#footer div {
    background: url(../images/backgnd_mainbody_bottom.png) bottom no-repeat;
#footer div div {
    background:url(../images/backgnd_mainbody_center.png) center repeat-y;

As you will quickly grasp, what I want to do is to apply a rounded top background as well as a rounded bottom background, with fixed widths of course, and a repeated inbetween background for the content.

Surprisingly I see that the top margin which I assigned to "#footer div" seems to act as if I had assigned it to "#footer" directly, so that this margin appears to be applied to #footer actually, not to its child div, and the footer is displayed 25px farther than desired from the previous block above.

What should I do to fix this?