Question

I was playing with a slideshow in jQuery today. I managed to create it when I noticed strange thing. The div #feature in which the slideshow is placed seems to be somehow glued to its parent element #content. When I add margin: 10px auto to the #feature div, the #content div is also lowered down by 10px relative to its parent element.

Can anyone tell me what have I done wrong here?

Providing you with the whole code would create a mess, but here’s a link:

CSS for #feature:

#feature {
    width:940px;
    margin: 10px auto;
    position: relative;
    height:500px;
    overflow: hidden;
    clear: both;
    box-shadow: 0px 0px 5px 2px #000;
}

and CSS for #content:

#content{
    min-height:800px;
    background-color: #fff;
}

My friend noticed an interesting thing. If you add margin-bottom: 30px to #menu the empty 10px space in content is filled correctly although the margin problem is still not solved.

Answer 1

Try adding overflow:auto; to #content. It may help.

Adding overflow prevents margins from collapsing

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin.

from https://www.w3.org/TR/CSS2/box.html#collapsing-margins