Jump to content
ben03

Parent container jumps out of wrapper when child has absolute positioning

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×