I have a div relatively positioned which has a span as a child. The child is absolutely positioned. How can I set the height of the outer div to match the one of the inner span?

1 answer

danwellman 5600
This was chosen as the best answer

It's not possible purely with CSS because the absolutely positioned span is taken out of the normal flow of the document and so cannot force the height of its container.

Does it have to be positoned absolutely? Could it be positioned using margins? If so you could set the span to display block and the container to display inline and then the span would set the height of the container...

If the span must be positioned absolutely, I think you'll need to use script to determine the height of the span and set the height of the container based on this...it would be trivial with jQuery, something like:


And not much harder with pure vanilla JS...

Answered over 8 years ago by danwellman