- This topic is empty.
April 28, 2014 at 8:40 pm #168823markthomesParticipant
Trying to figure out how to prevent the parent element from collapsing due to absolute positioned children elements. Haven’t ran into this before.
I know/understand why it’s happening, but am trying to figure out a solution. I am determining the parent elements size based on the images held within them. Since the images are positioned absolute to stack on top of each other I now have an issue where my parent container is collapsing. Any thoughts on how to remedy this.
http://codepen.io/WithAnEs/pen/zwFdtApril 29, 2014 at 2:10 am #168833Paulie_DMember
The parent will always collapse if everything thing inside is absolutely positioned.
Not a lot you can do about it barring using JS to determine the image height and adjust accordingly.
Just curious, why are you positioning the main image absolutely?April 29, 2014 at 4:02 am #168839SenffParticipant
Just like @Paulie says, we’d need a little more information — why are the images positioned absolute? Is it because it’s a carousel/slider? In that case, the parent should be given a height regardless, and/or each image you have in there should have the same height.
Apart from using JS to determine the height, you could also put an invisible image in the parent (not positioned absolute) that has the same height as the other images. But again, that only works if all images have the same dimensions.April 29, 2014 at 4:55 am #168843WithAn.EsParticipant
I’m positioning them absolute to stack them. Then swap them out to the front via JS. Not really a carousel, but close enough.
I can use JS for resizing. I just always try and find a CSS solution first.April 29, 2014 at 4:57 am #168844WithAn.EsParticipant
The dummy image struck me this morning as a solution. Just wasn’t sure if that was a bit janky of a solution or not.March 4, 2018 at 3:35 pm #267852Scott MParticipant
I realize this is too late for the OP, but for others who may come across this, here’s a solution:
position:absolutefor the child elements , you can hide them with
display:none. This way, you can avoid the collapsing parent and then just show the one element you need when you need it with
- The forum ‘CSS’ is closed to new topics and replies.