all my windows in a jquery slider line up vertically rather than horizontally

Question

I am completely new to jquery and found this plugin for an image slider. It works for images, but I added text next to my images for description. After I did that, my first image and the respective description show up fine on the first panel, but the following two images dont show up since they get lined vertically rather than horizontally. Which means that when the first slider gives way to the next, all the following images under the first picture also slide with the first leaving the other panels blank. Here is a link. How do I make all the images show up in their respective slides?

Here is my jquery:

$(document).ready(function() {
//Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size() 
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging  and Slider Function
rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $(".paging a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );

}; 

//Rotation  and Timing Event
rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
        $active = $('.paging a.active').next(); //Move to the next paging
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:first'); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, 7000); //Timer speed in milliseconds (7 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
}, function() {
    rotateSwitch(); //Resume rotation timer
}); 

//On Click
$(".paging a").click(function() {
    $active = $(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation timer
    return false; //Prevent browser jump to link anchor
});
});

Here is my css for the slider:

.window, .single{
position: relative;
height: 400px;
width: 880px;
margin-top: 10px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
background-color: #000000;

}

ul.image_reel {
    position: relative; 
}

ul.image_reel li {
    color: #ffffff;
    overflow:hidden;
    padding: 10px 0 10px 10px;  
    position: relative;
}


ul.image_reel h1, ul.image_reel p{
    padding-left: 10px;
    width: 260px;
    margin-left: 580px;
}


ul.image_reel img {
    float: left;
}

here is my html code:

<div class="window">

                <ul class="image_reel">
                    <li>
                        <img src="images/first.jpg" alt="" />
                        <h1>What do we develop?</h1>
                    <p>Obsia develops and manufactures natural stone and road sealers to preserve it forever.<br /> 
                    <br />All your projects, whether internal or external, are made stain-proof, dust-proof and weather-proof.  <br />
                    <br /></p>
                    </li>

                    <li>
                        <img src="images/second.jpg">
                        <h1>How does it work?</h1>
                        <p>The sealer penetrates the stone upto a depth of 6mm completely sealing the stone. The liquid mimics the natural crystalline structure of the stone improving the reflectivity. <br /> <br />The binder hardens and strengthens the structure of the stone including the weaker spots.</p>
                    </li>
                    <li><img src="images/third.jpg"></li>
                    <li></li>
                </ul><!-- end of image_reel -->

        </div><!-- end of window -->

            <div class="paging">
                <a href="#intro" rel="1">1</a>
                <a href="#problems" rel="2">2</a>
                <a href="#solution" rel="3">3</a>
                <a href="#savings" rel="4">4</a>
            </div><!-- end of paging -->
  </div>

Any help or response would be appreciated.

Answer 1

perhaps you need:

ul.image_reel { 
    float: left; 
}