Streaming live at 10am (PST)

Show/Hide Issue - Animation of divs underneath breaks when hidden div contains Float left content


#1

Hello,

I have hidden div that I toggle Show and Hide with another div. On “Show” I animate the height of the hidden div up to auto, and when I toggle “Hide”, it goes back down to zero. Standard stuff.

Here is the problem:
The hidden div contains text blocks that I want to appear as columns, so I set their class to Float Left.

When I do this, everything underneath the hidden div jerks immediately down to the new height—the nice, fluid animation breaks. I remove the float-left attribute and the animation appears fine, although now the text block do no appear as columns.

Here are the two examples:

Text Blocks w/ float-left, animation broken:
https://ecuu-page-redesign.webflow.io/

Text blocks w/o float-left, animation is ok, but the text is no longer in columns:
https://ecuu-page-redesign-89d3f2f3fda1f309f831.webflow.io/

Anyone know how to make the text blocks appear as columns AND animation appear fine?
Thank you in advance!