Clearing a responsive jQuery Cycle

Question

I've created a responsive image slider using jQuery cycle.

The following setup I have used works fine, apart from the containing .cycle div is not cleared correctly, making any content after it sit underneath it.

This is due to the fact the div is relative and its children are absolute.

     $('.cycle').cycle({
        slideResize: true,
        containerResize: false,
        fit: 1,
        width: "fit"
     });

My question is , how can I clear the responsive .cycle div without having a fixed height or using some event heavy JavaScript?

Here is my code on jsfiddle: http://jsfiddle.net/blowsie/HuNfz/19/

---

Update:

I wrote some code to fix the height of the cycle, which works as expected (although it can bug out sometimes), but its event heavy and not very slick.

Id love to see can be done in pure CSS or a change in the cycle setup.

http://jsfiddle.net/blowsie/HuNfz/22/

Answer 1

Cycle is not very responsive friendly. But Cycle2 definitely is. Check it out here: http://jquery.malsup.com/cycle2/