Grow your CSS skills. Land your dream job.

Absolutely Positioned DIV Inside of Wrapper DIV – Needs to Expand

  • # July 12, 2013 at 11:22 am

    I have a site with a wrapper div holding the content of part of the page and within this wrapper I have a few absolutely positioned divs that reveal on :hover. The problem is since they are absolutely positioned, they do not make the containing content wrapper expand to include their content. Here is my page:
    http://www.rose-hulman.edu/testing/team.html

    Hover over the sections under “leadership” to see my issue – particularly the last persons section.Could someone take a look please? Thanks!

    # July 12, 2013 at 12:23 pm

    Have you set position absolute on the wrapper?

    # July 12, 2013 at 12:24 pm

    Why use position absolute in the first place?

    Instead of doing that (and working with the positioning on hover), maybe it’s just easier to work with display:block and display:none instead?

    # July 12, 2013 at 12:29 pm

    Ah…I see that you have.

    Rather than positioning, could you not set the height to 0 and then change it to auto on hover?

    Would that work?

    EDIT: or use @Senff ‘s idea

    # July 12, 2013 at 1:59 pm

    Thanks guys! I ended up transitioning max-height from 0 to 500, since height was not working with auto.

    # July 12, 2013 at 2:21 pm

    Strange thing though, the transition only eases-in, even though it’s set as ease-in-out. Any ideas?

    # July 12, 2013 at 2:25 pm

    I’m guessing that it might be the max-height. Because the height isn’t actually set it can’t transition it appropriately.

    Perhaps a spot of jQuery?

    # July 12, 2013 at 2:40 pm

    Yup, I am thinking accordion.

    # July 12, 2013 at 2:42 pm

    >I am thinking accordion.

    Ooo…..that would be a nice interpretation.

    # July 12, 2013 at 4:50 pm

    Paulie_D,
    I have also been messing around with transform: scaleY() as you can see:
    http://www.rose-hulman.edu/testing/team.html , but the containing div stays open all the time – assuming it has to do with the max-height setting on the scaled content. Oh well, I guess I will just go with the jquery solution unless you can see something I am missing with my transform.

    # July 12, 2013 at 5:10 pm

    Sometimes a simple bit of jquery is all you need.

    I’d go with that.

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

You must be logged in to reply to this topic.

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