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

What you should be able to do is just let them float next to each other, in a common container. — Bergi
– Bergi, Commented Jun 27, 2013 at 15:42
@Bergi That complicates things a bit, but I see your point, using position:relative. Good idea, though it complicates things a bit. I found an interesting solution. I will publish it after I get more inputs. — DKean
– DKean, Commented Jun 27, 2013 at 15:49
I think a simple float:left is faaaaaar less complicated than trying to create dynamic inheritance in CSS. — zessx
– zessx, Commented Jun 27, 2013 at 15:51
@zessx Both float:left and float:right make the image to go far to the left, but I thought that you were right. I don't understand why float:right does not do it? Thank you for the suggestion, however... — DKean
– DKean, Commented Jun 27, 2013 at 15:59

rink.attendant.6 · Accepted Answer · 2013-06-27 15:43:20Z

1

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.

answered Jun 27, 2013 at 15:43

rink.attendant.6

46.7k64 gold badges111 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

DKean Over a year ago

very interesting reply. I never heard of these... Must investigate... Thank you for your input...

DKean Over a year ago

Wow! SASS and LESS are very impressive @rink.attendant.6 . Thank you for the light...

Bergi Over a year ago

@DKean: Yes, but don't forget they're not dynamic and serverside only.

DKean Over a year ago

@Bergi I think that LESS is client side too!

Bergi Over a year ago

@DKean: Oh, right. But only in modern browsers, i.e. not where you would really need it in lack of CSS3 features.

|

DKean · Accepted Answer · 2013-06-27 16:18:07Z

0

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

answered Jun 27, 2013 at 16:18

DKean

2,0996 gold badges19 silver badges30 bronze badges

Collectives™ on Stack Overflow

CSS cross inheritance

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related