resize absolute div inside relative div with liquid css - css

Question

Ok...here is my problem:
I have a webpage with html & body set from css to:
body,html{
position: fixed;
width: 100%;
height: 100%;
overflow:hidden;
}
and also a webkit tag to disable the scrollbar:
/*Disable scrolling*/
::-webkit-scrollbar {
display: none;
}
inside of the body i use 3 divs to cover the entire available space in the page:
(i will not use the actual css code for the divs because it's unimportant for this matter and i will write only a basic code to get the ideea)
As i said, three relative divs to cover the available 100% height and width:
.div1{
position: relative;
width: 100%;
height: 10%;
}
.div2{
position: relative;
width: 100%;
height: 80%;
}
.div3{
position: relative;
width: 100%;
height: 10%;
}
Now here is my problem:
* inside the middle div (div2) i have 4 concentric circles all of which are absolute divs wrote in css3. It is really important that these divs remain "absolute".
here is the css for them:
.size-large,
.size-normal,
.size-small,
.main-frame{
position:absolute;
left:0;
right:0;
margin:0 auto;
background: transparent;
border: 3px dotted #999;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
top: 50%;
}
.main-frame{
width: 50%;
padding-bottom: 50%;
margin-top:-25%; /* push back half */
}
.size-large{
width: 30%;
padding-bottom: 30%;
margin-top:-15%; /* push back half */
}
.size-normal {
width: 20%;
padding-bottom: 20%;
margin-top:-10%; /* push back half */
}
.size-small {
width: 10%;
padding-bottom: 10%;
margin-top:-5%; /* push back half */
}
Problem is that those circles does not resize acording to the relative div of which they belong.
Their width/height given in percentages, is set acording to the body element.
I want my design to be liquid and to use only the available webpage without scrolling but also to resize all it's elements on any display.
FULL SCREEN RESULT: http://jsfiddle.net/Nn7mU/1/embedded/result/
CODE VIEW: http://jsfiddle.net/Nn7mU/1/

Answer 1

From my understanding, you want to ensure your concentric circles to stay within the blue div whilst maintaining a perfect round circle according to the percentage width you have set (i.e. .main-frame {width: 50%}, .size-large {width: 30%), .size-normal {width: 20%}, .size-small {width: 10%})
Your circles are indeed adjusting according to your blue div (based on width % not height %). So since your blue div has width=100%, the circles will adjust according to that only.
You will need to find a way of using BOTH height and width % so it maintains aspect ratio and central positioning.
I would recommend reading on this thread which provides possible solutions:
HTML and CSS Fluid Circle