CODEWITHSUNDEEP
cssimagefluidresponsive-design
technopeasant
technopeasant

Reputation: 7949

CSS take height of absolutely positioned child

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!

Upvotes: 3

Views: 1816

Answers (4)

Will Lanni
Will Lanni

Reputation: 921

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.

Upvotes: 2

unexplainedBacn
unexplainedBacn

Reputation: 768

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.

Upvotes: 6

Saeed Neamati
Saeed Neamati

Reputation: 35842

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:

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

Upvotes: 1

ngen
ngen

Reputation: 8966

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

Upvotes: 0

Related Questions