scaling an HTML layout - css

Question

Let's say I have an html div (or some such element) featuring miscellaneous nested elements. I want to be able to design my layout using pixel positioning and pixel sizes (not percentages) and then scale up the resulting UI to fit the screen (while maintaining its aspect ratio).
So my question is how can I scale up an arbitrary html element and it's children while maintaining their layout?
Here's an example of a UI that I might want to scale up: http://jsfiddle.net/8dodovmn/2/
<div id="myUI" style="width:400px; height:300px; background-color:blue; position:relative;">
<div style="border:1px solid red; position:absolute;left:100px; top: 100px; width:100px; height:100px; text-align:center;">
<button style="height:50px; margin-top:20px;">Submit</button>
</div>
</div>
A CSS scale transform seemed like a good idea, but it doesn't work:
http://jsfiddle.net/Lqozzpmg/1/ The layout of the elements is not preserved.
#myUI
{
-webkit-transform: scale(2); /* Doesn't work, though it seems like it should. Layout of nested elements is not maintained */
}

Answer 1

Try adding a containing element so the #myUI element can be positioned in relation to it, then change your CSS a tiny bit. See fiddle here or text below
HTML
<div id="box">
<div id="myUI" style="width:400px; height:300px; background-color:blue; position:relative;">
<div style="border:1px solid red; position:absolute;left:100px; top: 100px; width:100px; height:100px; text-align:center;">
<button style="height:50px; margin-top:20px;">Submit</button>
</div>
</div>
</div>
CSS CODE
#box {
width:50vw;
height:50vh;
text-align:center;
}
#myUI {
transform: translateY(-50%);
-webkit-transform:translateY(-50%);
top:50%;
transform: scale(2);
/* Doesn't work, though it seems like it should. Layout of nested elements is not maintained */
transform-origin: 0%;
}
As you may imagine, the #box size is for demo purposes, you can use anything you want. You don't need to use viewport sizes either, I just used them just to show a not so commonly used CSS measure, but again, use what you like