Strange div margin issue

I'm trying to add a content rotator to a site I'm building. The rotator works fine. In fact, it works out better than I had hoped. I need to tweak some styling things, but that's besides the point.

For some reason, the rotator (which is relatively positioned and inside my container/wrapper div) pulls my wrapper and menu down with it when I add a margin to the top of it (margin:65px auto 0; or so开发者_Go百科mething like that). Any words of advice?

Page here: http://technoheads.org/test/ice/index.htm

This sounds like a classic case of collapsing margins.

You can fix this by giving the container a border-top, margin-top, padding-top, or an overflow other than visible. (jsFiddle)

you can probably accomplish what you want by giving #wrapper top padding instead giving #slideshow top margin.

I run into this problem a lot when I put elements inside of inline elements. You should be able to fix it by doing one of the following:

• Set the element you're having trouble with to display: block; (Usually a good enough fix)
• Use top-padding like already suggested (nothing wrong with using band-aids if it works...)
• Set the element to float: left; (Not really recommended, can cause some problems down the line, but will definitely allow you to add top and bottom margins)

How about this?

#menu {
  position: relative;
  width: auto;
  height: 100px;
  left: 383px;
  top: 0px;
}