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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...