Absolute positioned div inside relative positional div

Question

How can you contain an absolute positional div inside a relative positional div? For example, such a structure is as follows:

HTML

<div class="wrapper clearfix"> <div class="contentWrapper"> <div class="content">Looong text here...</div> </div> </div> 

CSS

 .wrapper { position:relative; } .contentWrapper { position:absolute; top:0; left:0; } 

will cause the height of the contents of the Wrapper to be 0 (when checking the element), and the div with the content class will not be displayed.

Is there a way to apply the clearfix method for absolute positioned elements inside relative?

thanks

Edit:

What I'm trying to do here is to avoid the “Looooong text” from the shell extension (the wrapper has dynamic width, cannot be fixed). contentWrapper contains text and wraps it, it also fills the width of the parent wrapper so that it does not expand. The only problem is that the height of the contentWrapper is 0 and the text is not displayed.

Any other way to do this?

Answer 1

No, this is not possible, you can use clearfix to clear floating elements.

Answer 2

If the only element inside your positioned container is set absolute, you will need to specify the height on the container. The problem is that position:absolue removes the element from the content stream, so the container does not recognize the absolutely positioned height of the element.