Geek Answers Handbook

Why are fields in CSS inconsistent? Strange behavior

Today I played with a slide show in jQuery. I managed to create it when I noticed a strange thing. The #feature div in which the slide show is posted seems somehow stuck to its parent #content element. When I add margin: 10px auto to the #feature div, the #content div also decreases by 10px relative to its parent element.

Can someone tell me what I did wrong here?

Giving you all the code will create a mess, but here's the link:

https://dharman.eu/sites/daftpunk/

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 then the empty 10px space in the content will be filled correctly, although the problem with #menu is still not resolved.

+4
source share
2 answers

Try adding overflow: auto; at #content. This can help.

+1
source

position: relative does just that ... does any element that it applies to make its position "relative" to its parent container.

#feature is a child of #content , so the position of #feature becomes relative to the position of #content . When you add this 10px margin to #feature, it moves down 10px from #content .

+2
source

More articles:


All Articles