ben03 Posted April 18, 2018 Share Posted April 18, 2018 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted April 18, 2018 Share Posted April 18, 2018 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. Link to comment Share on other sites More sharing options...
ben03 Posted April 18, 2018 Author Share Posted April 18, 2018 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... Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now