No replies
Darko74
Darko74's picture
Offline
newbie
Spain
Last seen: 9 years 46 weeks ago
Spain
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">
    <div>
        <div>
    	...
        </div>
    </div>
</div>

and this, the CSS:

#footer {
    clear:both;
    background: url(../images/backgnd_mainbody_top.png) top no-repeat;
}
 
#footer div {
    margin-top:25px;
    background: url(../images/backgnd_mainbody_bottom.png) bottom no-repeat;
}
 
#footer div div {
    margin-bottom:25px;
    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?