0

Probably a very simple fix to this one, been looking at it for a little bit now and cant figure it out.. Here is my code:

    margin-top:10px;
    width:998px;
    min-height:100px;
    max-height:300px;
    border:1px solid #CCC;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-image:url(../images/default/page.png);
    overflow:hidden;

When the margin-top is set at 10px the div doesn't move at all. If i set the margin-top to be 200px then the div doesn't move. However if i set it to say 500px then it moves down 500 as expected.

I have already tried removing the min & max heights for just a single set height however this doesn't sort the problem. Not that it should cause issues in the first place.

Can anyone see my mistake? I am sure my coding is relatively sound and don' really know how to research solving this issue.

andrew anderson
  • 393
  • 5
  • 6
  • 16
  • I forget what happens specifically, but it's possible the margin is being applied to the element's parent. Try using padding on the parent instead. http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element – mowwwalker Nov 20 '12 at 00:33
  • The problem lies with the structure and styling of the ancestors of whatever element this CSS applies to... but the specific issue is impossible to pinpoint without seeing a broader snapshot of both your HTML and CSS. – joequincy Nov 20 '12 at 00:38
  • Use `padding-top` instead of `margin-top` or use `margin-bottom` on the preceeding element. – mreq Nov 20 '12 at 00:39

3 Answers3

1

Check the margin and float of other elements. I don't see any problems with the code you provided.

GiantDuck
  • 1,086
  • 3
  • 14
  • 27
1

In CSS, adjacent vertical margins collapse, pending certain conditions.

So say you have 2 divs stack 1 on top of another. The top div has a margin bottom of 30px, and the bottom div has a margin top of 20px. In this situation, the margins 'collapse' into the highest value, the 30px margin bottom on the top div.

More info on this can be found here

In your situation, i'd look at the CSS of the surrounding elements to see if changing those values would do what you want.

Clark Pan
  • 6,027
  • 1
  • 22
  • 18
0

I have managed to resolved this issue by placing the divs above this one within another container Div and applying a margin-bottom:10px to it.

Its not totally ideal because it takes a little longer to code and adds another div which i don't really want but suppose it will have to do for now until i have a little more time to read up on this issue fully.

Thanks to everyone for your help and potential solutions.

andrew anderson
  • 393
  • 5
  • 6
  • 16