How to make a DIV auto height resizable even if the content is absolute?

Question

Hi, i have a container div which is position:relative and the squares are position:absolute because i want to play with their positions.

Like what you see, the container does not fit the content except if the squares are positioned in Relative, is there a solution for this?

I don't want to just set the height for container because the squares are not static so i want something that resizes automatically.

Thanks

Answer 1

Hi Tom,

I need a bit more clarity in your question and depiction but I think I catch what you are saying.

I am guessing what is in the image above is what is currently happening but you want the gray, relatively positioned container to "surround" the abolutely positioned containers, wherever they may be?

If so, I would add just one more DIV after all your absolutely positioned containers that has clear:both attributed to it. That's my personal little tip for making sure the parent container hugs all of its kids, no matter where they go running off to.

Hope that helps

Answer 2

Unfortunately it is not possible to contain absolute positioned elements.. They are taken completely out of the normal flow, so nothing knows how to wrap around them..

Answer 3

If you know the height of the absolutely positioned elements, however, you can set the 'containing' div to a min-height of their top offset plus that known height. Again, it won't contain it in the proper sense, but it will be at least that tall.