jQuery Cycle layout issue - added inline style (position:absolute) causing issue with layout

Question

I am trying to build a responsive jQuery Cycle implementation. I have built the layout so that it resembles a 2 row, 2 column table. The 1st column is 25% width with height: auto. The 2nd row essentially has a fixed height.

Both cells in the 2nd column cycle independently, but appear to cycle as one element (I don't think this is relevant, but I want to be thorough)

The issue I'm having is that jQuery Cycle adds position:absolute (I understand why) to the cycled elements; however, I can't figure out why the height of the top right column (1st row, 2nd column) is the way it is.

If I force position with position:relative !important' I get the necessary height but there is clearly an issue with the cycle.

I have tried cssBefore, cssAfter and every combination of styles I can think of, to no avail. If you look at the codepen referenced below, un-commenting the position:relative !important will display the closest I have come.

I am using jQuery Cycle v 3.0.2.

You can see the example at http://codepen.io/chrisrockwell/pen/uafeD. If you search (CTRL+F on windows) for UNCOMMENT THE BELOW LINE you will see what to uncomment to force the position, and how the display runs.

Also note that I have disabled autorun on the codepen, so you need to click RUN above the JavaScript window to re-initialize the cycle.

Thanks for any help!

Answer 1

Hmm..made some changes to your code. See if this is what you needed: http://codepen.io/adityadineshsaxena/pen/hvmro

CSS Changes:

.left-top{
  height: 365px !important;
}

.carousel-body {
    color: cyan;
    p {
      padding-top: 0;
      margin-top:5px;
      margin-bottom:5px;
    }
  }