How to maintain proportion on resize of a layout with absolute positioned elements - css

Question

I've been handed a bunch of pages to code up with weird irregular layouts. Below is an example of what I need to create.
The key points about this are;
The elements need to be positioned pixel perfect as per the mockups.
Upon window resize, all elements and the positions need to size down/up
proportionately.
The size of the container needs to resize proportionately also, because there will be more content under the layout.
Considering each element needs to have specific positioning, it's obvious to use absolute positioning. I also note that because the layout needs to stay proportionate, positioning needs to be done in percentages.
For images I can set the widths to be a percentage and height auto. And elements can be positioned with a percentage along the x axis.
But the problem arises when I need to position from the top.
If I declare an element to be say 20% from the top, this positioning won't change proportionately when I resize the page. Also, the containing block will need to have a declared height.
The only way I can see this working is with some javaScript trickery.
But this seems fussy for a seemingly simple layout. And it's not advisable to rely on javaScript to maintain a layout.
There must be a better solution, I've seen irregular layouts like this often.
I've looked into Flexbox, but I can't think of how it can help me in this situation.
How would you tackle this layout?

Answer 1

You can wrap everything in a wrapper that uses the "padding-bottom trick" to maintain its ratio based on its width. Because the height of the parent element is now dependent on the width of the document, all percentage values you give to top and bottom properties of child elements will be affected by the width of the page, instead of the height.
main {
position: relative;
width: 100%;
height: 0;
padding-bottom: 120%;
}
div {
background: red;
position: absolute;
}
.one {
width: 40%;
height: 40%;
top: 10%;
left: 40%;
}
.two {
width: 50%;
height: 20%;
top: 55%;
left: 15%;
}
.three {
width: 20%;
height: 30%;
top: 60%;
left: 70%;
}
<main>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</main>

Answer 2

Try using this trick to scale your container proportionally
<div class="container">
<div class="container-inner-wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
.container {
position: relative;
display: inline-block;
width: 75%; // Choose the width you want.
}
.container:after {
padding-top: [$height / $width * 100] %;
content: '';
display: block;
}
.container-inner-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Where $height and $width are numbers - the value of the height and width you want your container to be. The real value you should put in there is what you get when you divide the ideal height by the width and multiply that by 100% (the unit is going to be %). What you get then is the aspect ratio of your container, and it will stay that size and shape no matter your browser size.
You can use that on all your boxes too, just make sure that you have that inner wrap that's absolutely positioned just inside. If I was building this layout, I'd use this trick for sure.
Here's an example of someone else using this: http://wellcaffeinated.net/articles/2012/12/10/very-simple-css-only-proportional-resizing-of-elements/