CSS cross inheritance

Question

In CSS, is there a way to refer to property value like width of a container div tag from one of its contained elements to create a dynamic relationship between the two. Here is some code to illustrate my intent:

<div id="settingz" style="position:absolute; width: 350px; height: 300px;">
<span style="position:absolute;  left:inherit parent width; margin-left:-30px; top:6px;" >
        <img id="exportRedX" src="/static/RedX2.png" />
    </span>
(/div>

Notice the silly attempt left:inherit parent width; That is the best way for me to convey what I'm trying to do. I want to tie the image to a position relative to the div's width. I know about the align="right" but that does not really do what margin-left can contribute to the left: ... inheritance.

Any help is appreciated...

DK

Answer 1

Thank you all so much for the help. SASS and LESS seem to be impressive and I will dabble with them later. For now the solution I found, which answers my need is as follows:

<span style="position:absolute;  left: 100% ; margin-left:-30px;" >
    <img id="exportRedX" src="/static/RedX2.png" />
</span>

This hugs the right side and allows me to adjust the relative distance from the right as well.

The solution lies in left: 100% ; margin-left:-30px;. That makes the hugging dynamic.

Your time lent to help me is very appreciated, guys!

Thank you all,

DKean

Answer 2

This isn't possible with pure CSS, however you can use CSS preprocessors such as SASS or LESS to achieve similar things by using variables and mix-ins.