Absolute positioned children collapsing parent

[markthomes]

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.

CodePen Example
http://codepen.io/WithAnEs/pen/zwFdt

[Paulie_D]

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?

[Senff]

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.

[WithAn.Es]

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.

[WithAn.Es]

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.

[Scott M]

I realize this is too late for the OP, but for others who may come across this, here’s a solution:

Instead of position:absolute for 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 display:block.

[Author]

Posts