Coordinating CSS, is there a more straightforward approach than using JS?

Question

I find myself having to use JS too often for what I would consider to be something that ought to be solvable in CSS alone.

Here is an example situation of what I am trying to do:

div.outer { height:{Y}px }
div.inner { padding-top:{Y}px }

I don't really want to specifically set the height of the outer div, but I want is for the padding-top property of the inner div to match the height of the outer div. Is there something about CSS I am missing? Or is JS the usual approach?

In jQuery I'd do something like this:

var y = $('div.outer').height();
$('div.inner').css('padding-top',y+'px');

Although rare, what about clients that disable JS?

Clarification: Please notice that this is not so much a "how do I do this in CSS" question. I am aware that currently, you cannot do this in CSS. Rather it is more of a question about what other sorts of solutions might accomplish the coordination that I am after. I can write CSS in PHP with vars if I wanted to just calculate values for initial delivery, but that's not what I'm after. It is more about coordinating two elements so that when one changes (due to the window being resized or a device being rotated, or another element being introduced via AJAX, etc.) another element's styling also changes to match it.

Answer 1

The answer is no it's not possible (at this moment). By pure coincidence I stumbled upon the fact that apparently, you can only set the padding-top property relative to the parent element's width!? In your demo case that'd be:

div.outer { width: 400px; }
div.inner { padding-top: 50%; } /* will be exactly 200px */
/* You can also set a relative width (%), or inherit it */

I've made a little test case that demonstrates this: http://jsbin.com/rukabaso/1/edit. Resize the output window to see the values. When set to 50%; the padding-top property is exactly 50% of the parent's width, because apparently:

Percentages on all padding/ margin properties refer to the parent's width

For reference: How is padding-top as a percentage related to the parent's width?

Answer 2

Seems to be no support on variables in CSS. Try using a dynamic stylesheet,

http://www.example.com/example.css

#outer { height:{Y}px; }

#inner { padding-top:{Y}px; }

http://www.example.html

<div id="outer">

<div id="inner">

Answer 3

I don't think you can set padding based on the height of the parent. You could use a preprocessor like SASS and LESS which support variables.

Not sure on what you are trying to do but I guess this would have a similar result:

.inner {
    transform: translateY(100%);
}

Browser support is decent with the appropriate prefixes - http://caniuse.com/transforms2d

Answer 4

By assigning IDs or Classes to the HTML elements in question, it should be relatively easy to accomplish what I assume you're trying to do. Which is:

.outer {
    height: 100px;
}

.inner {
    padding-top: 100px;
}

I imagine that what you're wanting the CSS to do is automatically set the .inner padding-top to the height of the .outer without having to constantly adjust the CSS. However, as jmr333 stated, there is currently no support for variables in CSS.

In a situation like this though, I don't see why you would need to implement any JavaScript at all when you can just adjust the CSS to suit your needs.