Parent Height Based On Relative Positioned Children

css is a marvelous thing except when you are blocked and you haven't had your ahaha moment. Today I am having trouble to scale the height of my parent div containing a relative pos

Solution 1:

When you specify "top" you will move your object always without affecting parent's height. Which means that if you want to affect it's height you will have to move it with margins.

So your answer is: "No it is not possible". Here is the specification: http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins

Solution 2:

I found that what worked for me in a similar situation was instead of setting top: I set margin-top:. That will cause the parent div to resize itself appropriately.

Solution 3:

You could add an empty element after the .relative and set it's height to that of the .relative's top positioning.

Solution 4:

If you want to pass it with jquery

var positionToTop = $(".relative").css("top");
$(".relative").parent().css({"top":positionToTop});

i forked a CSSDeck here for you