Question

I am developing a simple content slider. However the container is not expanding as new content slides in. I assume this is because the position is set to absolute for the content items. However if they’re not absolutely positioned then the content items do not line up properly.

My question therefore is: How do I get the container (#triv_cont) to expand as the next content item slides in? If the solution is to not absolutely position the content items, then how do I get the content items to line up? I have tried vertical-align:top with no luck.

The test code is here -> http://codepen.io/lukeocom/pen/mHyBv

CSS selector for content items is:

#promos .trivia #triv_cont div

and the container is:

#promos .trivia #triv_cont

I have reviewed a few questions regarding this but cant seem to find the solution…

Answer 1

I solved this problem by setting the height of the container to the height of the next content item when the next button is pressed.

thisHeight = $('#' + selx).height() + 20;

and then

$('#triv_cont').animate({height: (thisHeight + 'px')}, 1000, 'swing');

easy…