Responsive percentage padding of fixed parent - html

Question

I'm trying to get a child DIV to have its padding set relative to its fixed parent DIV.
To demonstrate the problem, I've put together a quick JSFiddle - http://jsfiddle.net/mdxsegLt/
.top-fixed {
position: fixed;
top: 0px;
height: 70px;
max-height: 12.5%;
margin-bottom: 20px;
width: 100%;
left: auto;
right: auto;
z-index: 1030;
background-color: green;
}
.padding-percentage {
position: relative;
width: 50px;
max-width: 30%;
/*padding: 14px;*/
padding-top: 20%;
background-color: red;
}
<div class="top-fixed">
<div class="padding-percentage">test</div>
</div>
In that example, I'd like the red DIV to be contained entirely within the green, using 20% of the green DIVs height for the padding, not the entire page.

Answer 1

First things first... lets drop the ALL CAPS element names. It's bad practice these days. I think you were overdoing it a bit with your CSS declarations and by NOT nesting the text properly by wrapping it in a span or p tag. You shouldn't just have floating text that's not wrapped in a p or span tag. Wrapping it in such tags allows you to further customize like I did in my fiddle.
UPDATE
I think I actually get what you're trying to do.
CSS:
.top-fixed {
position: fixed;
top: 0px;
height: 70px;
width: 100%;
background-color: green;
}
.padding-percentage {
height: 100%;
width: 50px;
background-color: red;
}
.padding {
margin-top: 0px;
padding-top: 20px;
}
HTML:
<div class="top-fixed">
<div class="padding-percentage">
<p class="padding">TEST</p>
</div>
</div>
LINK TO FIDDLE
Looks like you needed to adjust the CSS and add a class to the "test" text by tossing it an a p tag.
Check out my fiddle and hope it helps you!