CODEWITHSUNDEEP
csshtmlmargin
andrew anderson
andrew anderson

Reputation: 393

margin-top doesn't move unless value is high

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.

Upvotes: 0

Views: 704

Answers (3)

andrew anderson
andrew anderson

Reputation: 393

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.

Upvotes: 0

Clark Pan
Clark Pan

Reputation: 6027

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.

Upvotes: 1

GiantDuck
GiantDuck

Reputation: 1064

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

Upvotes: 1

Related Questions