CSS take height of absolutely positioned child

Question

I've got a container that's set to a max-width:780px and height is undeclared. Inside the container, there's an image slideshow. Everything on the page is responsive, so as the width decreases, the image (who's width is set to 100%) adjust's the heights container.

The slideshow change's the images to display:static; and position:absolute; which no longer "holds open" the container because it's not seen as content of the container

Is there any creative solution out there to take the height of a child element that's absolutely positioned?

Example below has NO height declared on the main container.. nothing's holding it open. http://dhut.ch/test/santos/

Thank you!

Decided to use jQuery to handle it. See question below. http://stackoverflow.com/questions/6882019/using-jquery-to-adjust-a-parent-elements-height-to-match-its-visible-childs-he — technopeasant, Aug 02 '11 at 10:45

unexplainedBacn · Answer 1 · 2011-08-11T16:30:36.963

Are the images all the same dimensions? If yes, you can use a percentage padding-top on the element that contains the images.

So if your images are all, say, 760px wide by 500px tall, that's 500/760 = .65789

Which as percentage would translate into something like:

#main { 
    position: relative; 
    max-width: 760px;
    padding-top: 65.789%;  
}

The reason this works is because with padding if it's set with a percentage, it is calculated as a percentage of the width. As the element shrinks in width, the height will shrink proportionately and the box will remain in the same ratio of width to height. The images, positioned absolutely, won't be adding to the height of the box.

This'll work as long as your images are all the same aspect ratio and you're not expecting that ratio to change. If you'll be using a lot of random images, this isn't for you.

score 2 · Answer 2 · answered Jun 20 '13 at 17:55

2

I recently had a similar problem with an image that I needed to absolute position at the top of a Zurb Foundation templated page in order to pull it out of the flow and reset its dimensions (Image had to stretch to edges of wrapper, instead be enclosed by its parent .row padding). However, of course, this meant that all the fluid responsive elements below it popped right up over the top of the image. Setting a margin-top or positioning the sibling elements below meant a rigid top space that didn't resize with the width of the browser.

To get around it, I placed a duplicate of the image right after the absolute positioned image and set its visibility: hidden; I had to add a little bit of extra margin bottom to make up for the difference in height, but the end result is everything on the page flowing exactly to the height of the image in use.

I've also used the padding trick described by unexplainedBacn above, and it's a great trick as well. It takes a little bit of math, but I voted that answer up. Great solution.

answered Jun 20 '13 at 17:55

Will Lanni

923
12
25

1

+1 for the bit about putting the duplicated image after the absolutely positioned images. Been looking for a work around to this container height, absolutely positioned elements quandry for a while and that worked a treat! Thanks – Peter Featherstone Jan 30 '14 at 12:29
exactly the solution i was looking for! – Gray Spectrum Jun 01 '15 at 12:24
@GraySpectrum really? I think unexplainedBacn's solution is better than mine—make sure to try out the padding-top solution, as it's less html being written to the page and is really elegant. AND resizes proportionally. – Will Lanni Jun 02 '15 at 22:04
in my case the absolutely-positioned image's aspect-ratio is fluid from one breakpoint to another, so a fixed percentage on the top padding wasn't cutting it. by placing an identical image within the main container, setting it's visibility to hidden, and then setting it's aspect-ratio to expand and contract exactly as the visible, absolutely-positioned image did, my container now keeps a clean 1px border around the visible image exactly as i need it to. i may have to pay for that extra image in bandwidth (not sure with vis set to hidden), but it's worth it to get the effect i'm looking for. – Gray Spectrum Jun 04 '15 at 16:45

score 1 · Answer 3 · answered Jul 30 '11 at 07:54

I think you'd better change your approach. For sliders, the best practices is to float child elements of the container, and also use one of the known techniques to prevent parent's great collapse. So, I suggest that you remove the position: absolute CSS rule from images and float them inside your <div id='main'>, then use any of these methods to force it to encompass it's children:

div#main {overflow: hidden;}
div#main:after {content: ''; display: block; clear: both; visibility: hidden;}
Add a <div style='clear: both;'> to the end of your main div container.

Naemati - I'd LOVE to float them... but to have them fade one into another, they need to be positioned absolutely on top of each other. — technopeasant, Jul 30 '11 at 08:23

score 0 · Answer 4 · answered Jul 30 '11 at 07:43

0

Remove the absolute position. I would avoid inline styling as well.

answered Jul 30 '11 at 07:43

ngen

8,816
2
18
15

I hear you, it's a pain in the ass. The inline style is being generated by the jquery slideshow, so there's no way to avoid it. – technopeasant Jul 30 '11 at 08:22

CSS take height of absolutely positioned child

4 Answers4