Absolutely Positioned DIV Inside of Wrapper DIV – Needs to Expand

[svoltmer]

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!

[Paulie_D]

Have you set position absolute on the wrapper?

[Senff]

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?

[Paulie_D]

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

[svoltmer]

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

[svoltmer]

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

[Paulie_D]

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?

[svoltmer]

Yup, I am thinking accordion.

[Paulie_D]

>I am thinking accordion.

Ooo…..that would be a nice interpretation.

[svoltmer]

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.

[Paulie_D]

Sometimes a simple bit of jquery is all you need.

I’d go with that.

[Author]

Posts