Strange div margin issue

Question

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

score 3 · Accepted Answer · edited May 23 '17 at 10:34

3

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)

edited May 23 '17 at 10:34

Community

1
1

answered May 10 '11 at 18:23

Ben Blank

54,908
28
127
156

Not quite: the two are nested. Try inspecting the page and adding a top margin to the slideshow. In both Firefox 3.6.6 and Chrome (whichever latest build) I've had the issue (I'm not on my computer, hence the outdated firefox). – Salem May 10 '11 at 18:27
1

Nested elements are affected by margin collapse, check out the jsFiddle I link. I was able to get your page to work as intended by adding `overflow:auto` to `#wrapper` and setting the margins you mention on `#slidesContainer` via FireBug. – Ben Blank May 10 '11 at 18:31
+1 for collapsing margins - similarly I added 1px padding to top of #wrapper and achieved the same as @Ben's screenshot – clairesuzy May 10 '11 at 20:19

score 0 · Answer 2 · answered May 10 '11 at 18:25

0

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

answered May 10 '11 at 18:25

user716340

81
2

I thought of that, but I don't want a band-aid. I kinda want to know why it isn't working. – Salem May 10 '11 at 18:28

score 0 · Answer 3 · answered May 10 '11 at 20:13

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)

score 0 · Answer 4 · answered May 10 '11 at 20:50

0

How about this?

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

answered May 10 '11 at 20:50

kei

11
1

Strange div margin issue

4 Answers4