Relative Positioning…thing…

[xpy]

Can someone explain me this please…

I know there is no way to move an element a percentage relative to it’s own width or height, so I tried to ‘trick’ CSS in a way an I did this Relative Positioning Disaster. The concept is pretty simple, I put an inline-block element into another inline block element so the outer element will always have the same width/height the inner element has… So, I thought, if I moved the inside element using top/bottom or right/left with a percentage value it’ll move e.g. 10% of it’s parent width/height. I was happy to see that it worked for ‘left’, not only it worked, but it also moves if you type into it and the element grows… But for some reason, it doesn’t seem to work for top/bottom… Does anyone know why this happens? Is there a CSS solution for this?

Thank you…

[jurotek]

I think your div “out” needs to have assigned some height if you want to position div “in” from top in %.
Or if you don’t want to assign height to div “out” then on div “in” you have to change top:% to margin-top:%

[xpy]

@jurotek The funniest thing about this, is that the space margin-top:% adds is relative to the element’s parent width and not it’s parent height as everyone would assume… Take a look at MDN…

[wolfcry911]

firstly, neither element is inline-block, but that has no bearing on this matter.

The reason it is happening is that the containing element’s (#out) has no defined height – as jurotek stated. It also has no defined width, but the width can be calculated definitively even though it’s a ‘shrink to fit’ width. While the height can be computed for display purposes, it cannot be used for determining percentages – per the specs.

I don’t believe there is a CSS solution, barring giving #out a height. It would be relatively easy using javascript however.

[xpy]

@wolfcry911 One of my many experiments was with ‘inline-block’ and it indeed had the same resutls… I thought it was that one… Anyway… I didn’t really understand the difference between the width’s and height’s calculation… Could you analyze it more please? Thank you…

[Author]

Posts