Margin Bottom 100% and Margin Top -100% not working

Question

I'm having trouble understanding why my third div doesn't stack at -100% height when I use margin-top. I'm animating a movement of divs using Greensock and margin-left works perfectly for the first div. But when I try to move the upper div down, it is way higher. I know that height is based on width, but as far as I understand if I use 100% it shouldn't matter what the dimensions are. I tried using margin-bottom first but it didn't work. Any help would be greatly appreciated. Thank you. Here is the jsFiddle https://jsfiddle.net/kqyyq78q/

<body>
<a id="overlay"></a>
<div id="start">
<img src="http://imgh.us/roadtest1.svg" id="road" />
</div>
<div id="num1">
<img src="http://imgh.us/roadtest2.svg" id="road" />
</div>
<div id="num2">
<img src="http://imgh.us/roadtest3.svg" id="road" />
</div>
</body>

html,
body {
width: 100%;
height: 100%;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
overflow: hidden;
font-size: 100%;
position: absolute;
}

#overlay {
z-index: 8;
position: fixed;
margin-left: 50%;
padding-top: 20%;
}

#road {
width: 100%;
height: auto;
}

#start {
width: 100%;
height: 100%;
position: fixed;
text-align: center;
}

#num1 {
width: 100%;
height: 100%;
position: fixed;
margin-left: 100%;
}

#num2 {
width: 100%;
height: 100%;
position: fixed;
margin-top: -100%;
}

What is your desired end state for this, visually? Can you provide an image? — SwankyLegg
I want the div's to be able to move as if transversing one whole image. Like on the movement from div #start to #num1, it moves smoothly. There's no issue pushing #num1 down, it's just there's a white gap when trying to move #num2 down from above. I just don't understand why there's the gap between #num1 and #num2 — alec steinke
Here's an image example s30.postimg.org/m4u6hm9wx/example.jpg I'm having problems moving from 2 to 3 because there's a white space that I can't understand why it's there. — alec steinke

jperezov jperezov · Accepted Answer · 2016-02-05T20:59:18

What's happening is that you're using percentages on the margin as though they were relative to the image's height.

Percentages for margin and padding are relative to the width. That means that your margin-top: -100%; rule will overshoot the mark whenever its width is not equal to its height. On the other hand, the css rule top: -100%; is based on the height, and will work.

I've altered your code a bit to show a working example of this.

#num2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -100%;
}

Margin Bottom 100% and Margin Top -100% not working

1 Answers