It seems like I'm continuously resorting to using JavaScript too frequently for tasks that should ideally be achievable with CSS alone.
Let's consider a specific scenario I'm tackling:
div.outer { height:{Y}px }
div.inner { padding-top:{Y}px }
I don't necessarily want to explicitly define the height of the outer div. Instead, what I aim for is to have the padding-top property of the inner div equal the height of the outer div. Is there a CSS solution that I might be overlooking? Or is JavaScript the go-to method in this case?
In jQuery, my approach would typically look something like this:
var y = $('div.outer').height();
$('div.inner').css('padding-top',y+'px');
But then again, how can we handle scenarios where clients disable JavaScript?
Just to clarify: This isn't solely about "how do I achieve this using CSS." I am well aware that CSS currently doesn't offer a direct solution for this. Rather, it's more about exploring alternative methods that could accomplish the synchronization I'm aiming for. While I could theoretically generate CSS in PHP using variables, my goal goes beyond just pre-calculating values upon initial loading. It's more about ensuring two elements remain coordinated, such that when one element changes (e.g., due to window resizing, device orientation changes, or introduction of new elements via AJAX), the styling of another element adjusts accordingly.