Grow your CSS skills. Land your dream job.

Containing div not expanding with slideshow image

  • # December 4, 2012 at 10:43 am

    I have right column content that contains a slideshow with images of different heights within a slideshow. The problem is that the containing column or div don’t grow in height to accommodate the images as they change into the slideshow.
    Look at my page here:
    https://edit-wwwprep.rose-hulman.edu…-services.aspx

    The area is on the right titled “Featured Partners”

    # December 4, 2012 at 10:44 am

    Your link does not work.

    However, I can’t think of any reason why your container WOULD increase in height because your slideshow widget now contains a larger image.

    I assume that the widget scales the image to fit the widget size…that would be standard.

    # December 4, 2012 at 11:16 am

    I would point out (although I’m not sure that it will make any difference) that all of those divs have set heights. You could try removing those.

    # December 4, 2012 at 11:23 am

    I had the all ones in the slideshow set to 100%

    # December 4, 2012 at 11:26 am

    No…I think it’s the fact that the images are all absolutely positioned. Not much you can do about that as I guess it’s fundamental to the way the slider works.

    Your only realistic option is to provide a fixed height to the slider div (perhaps 170px) and make sure it’s big enough to hold the images you need.

    # December 5, 2012 at 11:23 am

    Is there a way to make images, of different heights, change the size of a containing div as they display active? All the slideshows I’ve seen use absolute positioning, which makes it impossible for the div surrounding the slideshow to expand to the increase in slide height.

    # December 5, 2012 at 11:25 am

    I would do a google search for a ‘dynamic image slider’

    # December 13, 2012 at 4:20 pm

    There was no solution, as the images are all relative and absolutely positioned.

    # December 13, 2012 at 7:05 pm

    @svoltmer @jamy_za created a custom one for me that fit my design (click the process numbers in the sidebar). Is this what you’re looking for?

    Resize the browser too.

    http://codepen.io/chrisburton/full/BFxEv

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".