None of the carousel plugins I use are working properly. Usually I need to resize my browser before everything is displayed properly. This is not practical because mine is a mobile app.

I have nailed down the problem to positioning. The transition between pages requires the positioning to be Absolute (see #page > div). However, the carousel requires the Relative positioning.

I tried adding an extra <div></div> around the carousel and positioning that to be relative, but it isn't doing the trick. Anyone know how to fix this...


#page {
  position: relative;

#page > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

#page > div.current {
    display: block;


HTML Code:
<!doctype html>
  <meta charset="utf-8">
  <meta http-equiv="cleartype" content="on">
  <link rel="stylesheet" href="css/transition.css?v=1">
  <link rel="stylesheet" href="css/elastislide.css?v=1">

<div id="page">  

<div id="pageLogin" class="pageLogin current">
    <a href="#pageSearch" id="signIn" class="button small brown"><span>Sign in</span></a>

<div id="pageSearch" class="pageSearch">
    <!-- Elastislide Carousel -->
    <div id="carousel" class="es-carousel-wrapper">
    <div class="es-carousel">
        <li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
        <li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
        <li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
        <li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
    <!-- End Elastislide Carousel -->
</div> <!--! end #pageSearch-->
</div><!--end #Page-->

  <script src=""></script>
  <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.elastislide.js"></script>