- This topic is empty.
March 17, 2012 at 3:26 pm #37201
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…March 17, 2012 at 4:05 pm #99301jurotekParticipant
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:%March 17, 2012 at 4:16 pm #99302March 18, 2012 at 9:20 am #99326wolfcry911Participant
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.
- The forum ‘CSS’ is closed to new topics and replies.