Parent container jumps out of wrapper when child has absolute positioning

[ben03]

Hi there,

  I have a scenario where I have no option but to absolute position some elements within a div. So I set the parent to position relative, the children absolute, job done. 

But if I float the parent container to the right, it jumps outside its wrapper. Is there a way to stop this happening? 

.wrapper{}
.parent{position: relative; float: right;}
.child{position:absolute;}

<div class="wrapper">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Thanks

[dsonesuk]

As far as the parent knows it has no content, because using position: absolute for child element takes it out of the flow from other elements. They will collapse, or attempt to fill the space left by these elements.

The parent has no height and now no width because you are using float, which causes the element to shrink to content which as stated above does not exist. So all child element are moved now to the right, moving content from just inside the parent right edge outwards beyond the right edge.

The child elements will overlap each other as well.

ARE you sure you don't have an option? you see what you have to consider and issue you have to endure using position: absolute.

[ben03]

Thanks for your help with this dsoneuk. At this point in time it is the only option. It makes sense what you are saying, and can see how this is a less-than ideal scenario. I will continue to explore options...