I have been speaking with the author, and upon learning (and being convinced) that css margin-top and margin-bottom are indeed not based upon the div's height, I found myself annoyed at the fact and decided to write something. I hope it helps anyone with a similar issue!
Basically, it searches through the document for element tags with the attribute "vertMargin" set to true. If it finds one, it creates a function prototype with 3 variables in it's scope... two for the initial inline margin setting, and one used as a callback, then adds this prototype to an array. Upon resizing the window, it iterates over this array to run the stored callback, resizing the div's margin's appropriately.
Anyway, my solution.
Make a script file with the following code.
var addMarginBottom = function(target){
var parentDiv = target.parentNode;
var parentRect = parentDiv.getBoundingClientRect();
var parentHeight = parentRect.bottom - parentRect.top;
var height_1Pc = parentHeight/100;
target.style.marginBottom = height_1Pc*target.bottom_pc+"px";
};
var addMarginTop = function(target){
var parentDiv = target.parentNode;
var parentRect = parentDiv.getBoundingClientRect();
var parentHeight = parentRect.bottom - parentRect.top;
var height_1Pc = parentHeight/100;
target.style.marginTop = height_1Pc*target.top_pc+"px";
};
var NODE_REF = [];
var nodeRef = function(){
var update;
var top_pc;
var bottom_pc;
}
var realHeightMarginInit = function(target){
var children = target.childNodes;
for(var x = 0; x < children.length; x++){
var child = children[x];
if(child.nodeType == 1){ //is an elemental node..
if(child.hasAttribute("rel-margin")){
var nodeRef = child;
var nodeStyle = window.getComputedStyle(nodeRef);
var parentStyle = window.getComputedStyle(target);
var num = parseFloat(nodeStyle.marginTop);
var dom = parseFloat(parentStyle.width);
nodeRef.top_pc = (num/dom)*100;
num = parseFloat(nodeStyle.marginBottom);
nodeRef.bottom_pc = (num/dom)*100;
nodeRef.update = function(){
addMarginTop(nodeRef)
addMarginBottom(nodeRef);
};
NODE_REF.push(nodeRef);
}
realHeightMarginInit(child);
}
}
}
In your HTML file, add these inside some script tags...
window.addEventListener("resize", function(){
for(var x = 0; x < NODE_REF.length; x++){
NODE_REF[x].update();
}
});
window.addEventListener("load", function(){
realHeightMarginInit(document);
for(var x = 0; x < NODE_REF.length; x++){
NODE_REF[x].update();
}
});
Now you can add an inline style for margin-top and margin-bottom to achieve the behavior you are looking for :) Simply add the attribute vertMargin="true" and it will work as expected.
<div rel-margin id="your-top-left-div">
Hello!
</div>
This however may very well not be your best option (it is also kind of a mess)! There are tons of tools and techniques you can use to avoid this problem, such as using a CSS framework like bootstrap, and 90% of the time, restructuring your CSS and HTML is perhaps the most straightforward and easiest to implement. Of course, sometimes a js based solution may just be what you need.
EDIT: Updated the code so that styles can now be part of a stylesheet rather than inline.
(Updated) Example of usage with OP's code.
