CODEWITHSUNDEEP
htmlcss
Salem
Salem

Reputation: 1172

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 something like that). Any words of advice?

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

Upvotes: 0

Views: 1356

Answers (4)

kei
kei

Reputation: 11

How about this?

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

Upvotes: 0

Wex
Wex

Reputation: 15715

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)

Upvotes: 0

user716340
user716340

Reputation: 81

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

Upvotes: 0

Ben Blank
Ben Blank

Reputation: 56634

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)

Upvotes: 3

Related Questions